javascript - How do I make a basic column(vertical) chart in d3js? - Stack Overflow

admin管理员组

文章数量:1405536

I'm trying out d3js and I have a problem with getting my first basic column(vertical bar) chart work. The only thing I find a bit difficult to understand is the scaling thing. I want to make the x and y axis ticks with labels but I have the following problems:

First of all here is my data:

{
"regions":
["Federal","Tigray","Afar","Amhara","Oromia","Gambella","Addis Ababa","Dire Dawa","Harar","Benishangul-Gumuz","Somali","SNNPR "],
"institutions":
[0,0,34,421,738,0,218,22,22,109,0,456]
}

1. On the y-axis the values are there but the order is reversed. Here is the code:

   var y = d3.scale.linear().domain([0, d3.max(data.institutions)]).range([0, height]);

then I use this scale to create a y-axis:

var yAxis = d3.svg.axis().scale(y).orient("left");

and add this axis to the svg element

svgContainer.append("g")
        .attr("class", "y axis")
        .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Institutions");

the problem here is that the y-axis start from 0 at the top and with 700 at the bottom which is OK but it should be in reverse order.

The other problem I have it the x-axis. I want to have an ordinal scale since the values I want to put are in the regions names I have above. So here's what I've done.

var x = d3.scale.ordinal()
                    .domain(data.regions.map(function(d) { return d.substring(0, 2); }))
                    .rangeRoundBands([0, width], .1);

then the axis

var xAxis = d3.svg.axis()
                      .scale(x)
                      .orient("bottom");

and finally add it to the svg element

svgContainer.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate( 0," + height + ")")
            .call(xAxis);

Here the problem is the ticks as well as the labels appear but they are not spaced out evenly and do not correspond with the center of the rectangles I'm drawing. Here is the plete code so you can see what's happening.

$(document).ready(function(){

    d3.json("institutions.json", draw);

});

function draw(data){
    var margin = {"top": 10, "right": 10, "bottom": 30, "left": 50}, width = 700, height = 300;

    var x = d3.scale.ordinal()
                    .domain(data.regions.map(function(d) { return d.substring(0, 2); }))
                    .rangeRoundBands([0, width], .1);


    var y = d3.scale.linear()
              .domain([0, d3.max(data.institutions)])
              .range([0, height]);

    var xAxis = d3.svg.axis()
                      .scale(x)
                      .orient("bottom");    

    var yAxis = d3.svg.axis()
                      .scale(y)
                      .orient("left");  

    var svgContainer = d3.select("div.container").append("svg")
                           .attr("class", "chart")
                           .attr("width", width + margin.left + margin.right)
                           .attr("height", height + margin.top + margin.bottom)
                          .append("g")
                            .attr("transform", "translate(" +margin.left+ "," +margin.right+ ")");        

    svgContainer.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate( 0," + height + ")")
            .call(xAxis);

    svgContainer.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text("Institutions");

    svgContainer.selectAll(".bar")
      .data(data.institutions)
      .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", function(d, i) {return i* 41;})
        .attr("y", function(d){return height - y(d);})
        .attr("width", x.rangeBand())
        .attr("height", function(d){return y(d);});

}

I'm trying out d3js and I have a problem with getting my first basic column(vertical bar) chart work. The only thing I find a bit difficult to understand is the scaling thing. I want to make the x and y axis ticks with labels but I have the following problems:

First of all here is my data:

{
"regions":
["Federal","Tigray","Afar","Amhara","Oromia","Gambella","Addis Ababa","Dire Dawa","Harar","Benishangul-Gumuz","Somali","SNNPR "],
"institutions":
[0,0,34,421,738,0,218,22,22,109,0,456]
}

1. On the y-axis the values are there but the order is reversed. Here is the code:

   var y = d3.scale.linear().domain([0, d3.max(data.institutions)]).range([0, height]);

then I use this scale to create a y-axis:

var yAxis = d3.svg.axis().scale(y).orient("left");

and add this axis to the svg element

svgContainer.append("g")
        .attr("class", "y axis")
        .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Institutions");

the problem here is that the y-axis start from 0 at the top and with 700 at the bottom which is OK but it should be in reverse order.

The other problem I have it the x-axis. I want to have an ordinal scale since the values I want to put are in the regions names I have above. So here's what I've done.

var x = d3.scale.ordinal()
                    .domain(data.regions.map(function(d) { return d.substring(0, 2); }))
                    .rangeRoundBands([0, width], .1);

then the axis

var xAxis = d3.svg.axis()
                      .scale(x)
                      .orient("bottom");

and finally add it to the svg element

svgContainer.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate( 0," + height + ")")
            .call(xAxis);

Here the problem is the ticks as well as the labels appear but they are not spaced out evenly and do not correspond with the center of the rectangles I'm drawing. Here is the plete code so you can see what's happening.

$(document).ready(function(){

    d3.json("institutions.json", draw);

});

function draw(data){
    var margin = {"top": 10, "right": 10, "bottom": 30, "left": 50}, width = 700, height = 300;

    var x = d3.scale.ordinal()
                    .domain(data.regions.map(function(d) { return d.substring(0, 2); }))
                    .rangeRoundBands([0, width], .1);


    var y = d3.scale.linear()
              .domain([0, d3.max(data.institutions)])
              .range([0, height]);

    var xAxis = d3.svg.axis()
                      .scale(x)
                      .orient("bottom");    

    var yAxis = d3.svg.axis()
                      .scale(y)
                      .orient("left");  

    var svgContainer = d3.select("div.container").append("svg")
                           .attr("class", "chart")
                           .attr("width", width + margin.left + margin.right)
                           .attr("height", height + margin.top + margin.bottom)
                          .append("g")
                            .attr("transform", "translate(" +margin.left+ "," +margin.right+ ")");        

    svgContainer.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate( 0," + height + ")")
            .call(xAxis);

    svgContainer.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text("Institutions");

    svgContainer.selectAll(".bar")
      .data(data.institutions)
      .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", function(d, i) {return i* 41;})
        .attr("y", function(d){return height - y(d);})
        .attr("width", x.rangeBand())
        .attr("height", function(d){return y(d);});

}

• javascript
• d3.js

Share Improve this question Follow asked Dec 24, 2012 at 19:12 tsegatsega 87622 gold badges1616 silver badges3333 bronze badges 1

• 1 You should consider presenting your example code in a jsFiddle or in a bl.ocks. Makes it a lot easier for people to see what you're working on and to help you out. – seliopou Commented Dec 24, 2012 at 20:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I put the code to Fiddle: http://jsfiddle/GmhCr/4/

Feel free to edit it! I already fixed both problems.

---

To fix the upside-down y-axis just swap the values of the range function arguments:

var y = d3.scale.linear().domain([0, d3.max(data.institutions)]).range([height, 0]);

Do not forget to adjust the code for the bars if you change the scale!

---

The source of the mismatch between bars and the x-axis can be found here:

var x = d3.scale.ordinal()
    .domain(data.regions.map(function(d) {
        return d.substring(0, 2);}))
    .rangeRoundBands([0, width], .1);

svgContainer.selectAll(".bar")
  .data(data.institutions)
  .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("x", function(d, i) {return i* 41;})
    .attr("y", function(d){return height - y(d);})
    .attr("width", x.rangeBand())
    .attr("height", function(d){return y(d);});

You specify the padding for rangeRoundBands at 0.1 but you ignore the padding when puting the x and width values for the bars. This for example is correct with a padding of 0:

var x = d3.scale.ordinal()
    .domain(data.regions.map(function(d) {
        return d.substring(0, 2);}))
    .rangeRoundBands([0, width], 0);

svgContainer.selectAll(".bar").data(data.institutions).enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d, i) {
        return i * x.rangeBand();
    })
    .attr("y", function(d) {
        return y(d);
    })
    .attr("width", function(){
        return x.rangeBand();
    })
    .attr("height", function(d) {
        return height -y(d);
    });

The padding determines how much of the domain is reserved for padding. When using a width of 700 and a padding of 0.1 exactly 70 pixels are used for padding. This means you have to add 70 / data["regions"].length pixels to every bar's x value to make this work with a padding.

本文标签： javascriptHow do I make a basic column(vertical) chart in d3jsStack Overflow