CODEWITHSUNDEEP
javascriptsvgchartsd3.jsbar-chart
Yansee
Yansee

Reputation: 85

d3.js - Bar chart won't display with scale

I updated my code to use the scale method in D3. However, since then my bar chart won't display. What is the cause of this issue? 

var dataset = [ ];

    for (var i = 0; i < 14; i++) {var newNumber = Math.round(Math.random() * 70);
    dataset.push(newNumber);}

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    var widthScale = d3.scale.linear()
                    .domain([0,d3.max(dataset)])
                    .range([0,w]);

        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", 3)
            .attr("y", function (d,i) {return i* 36;})
            .attr("width", function(d) {return widthScale;})
            .attr("height", h / dataset.length - barPadding)
            .attr("fill", function(d) {return "rgb(0, 0, " + (d * 10) + ")";});

Upvotes: 0

Views: 352

Answers (1)

user490524
user490524

Reputation:

A D3 scale is just a function translates values from a given input domain (your data values, 0 to max) to a specified output range (the width of your chart). Thus you have to apply the scale to your data, e.g. widthScale( d ). Right now you are assigning the widthScale function to the width attribute of your rect instead of the output value.

See the working fiddle: http://jsfiddle.net/S92u4/

Upvotes: 1

Related Questions