score:1

Accepted answer

There are two issues, one is you are using a d3 version that isn't compliant with your code, and two, your dimensions need to be modified.

The first issue is that you are using an old version(s) of d3:

<script type = "text/javascript" src="d3/d3.v2.js"></script>
<script type = "text/javascript" src="d3/d3.v3.min.js"></script>

But using d3v4 namespace:

yScale = d3.scaleLinear().range ([height, 0]);

for example, D3v3 uses d3.scale.linear()

Since the scales in d3v3 are all properties of d3.scale, there is no property or function of the d3 library located at d3.scaleBand or d3.scaleLinear, and consequently you see the error you are getting. D3v4 changed this design pattern.

So, let's use d3v4, that solves the first issue.


Second, your dimensions need to be modified. You have an svg that is 40x40:

<svg class="chart" width="40" height="40"></svg>

But you have a margin of 200 (or 100 on each side), naturally nothing appears inside the visible portion of the svg. You are actually specifing a negative height and width here:

width = svg.attr("width") - margin,    // width = 40 - 200
height = svg.attr("height") - margin;  // height = 40 - 200

Instead, we can increase the svg to 500,500 (for example) and set the margin to something more reasonable like 40 pixels, then we should see your axes as expected:

var svg = d3.select("svg"),
    margin = 40,
    width = svg.attr("width") - margin*2,
    height = svg.attr("height") - margin*2;

var xScale = d3.scaleBand().range ([0, width]).padding(0.4),
    yScale = d3.scaleLinear().range ([height, 0]);

var g = svg.append("g")
           .attr("transform", "translate(" + margin + "," + margin + ")");


var data = [
	{year: 2000, value: 100},
	{year: 2001, value: 200},
	{year: 2002, value: 300},
	{year: 2003, value: 400},
	{year: 2004, value: 200},
	{year: 2005, value: 100},
];

    xScale.domain(data.map(function(d) { return d.year; }));
    yScale.domain([0, d3.max(data, function(d) { return d.value; })]);

    g.append("g")
     .attr("transform", "translate(0," + (height) + ")")
     .call(d3.axisBottom(xScale));

    g.append("g")
     .call(d3.axisLeft(yScale).tickFormat(function(d){
         return "$" + d;
     }).ticks(10))
     .append("text")
     .attr("y", 6)
     .attr("dy", "0.71em")
     .attr("text-anchor", "end")
     .text("value");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<h1>Clinical Data Analysis</h1>
<p>Global Performance</p> 
</div>
<svg class="chart" width="500" height="500"></svg>
<p>Global Performance</p> 

And here is a bl.ock demonstrating it.

I added some dummy data that I embedded directly. I also didn't add a line as you didn't include code for that, so it is just the axes


Related Query