Question

我用d3.js制作一个水平条形图，我无法改变条形图矩形的大小。他们对我想做的事情来说太大了。 Here's a screenshot因为JSFiddle不会显示图表（数据在我的本地驱动器上）。这是我的代码：

var m = [40, 20, 10, 145], //TRBL
    w = 400 - m[1] - m[3], //margin.right - margin.left
    h = 400 - m[0] - m[2]; //margin.top - margin.bottom

var format = d3.format(",.0f");

var x = d3.scale.linear().range([0, w]),
    y = d3.scale.ordinal().rangeRoundBands([0, h], .2);

var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-10),
    yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);

var cause = d3.select("#cause").append("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")")

d3.csv("data/cause.csv", function(data) {

  // Parse numbers, and sort by value.
  data.forEach(function(d) { d.number = +d.number; });
  data.sort(function(a, b) { return b.number - a.number; });

  // Set the scale domain.
  x.domain([0, 350]);
  y.domain(data.map(function(d) { return d.cause; }));

var bar = cause.selectAll("g.bar")
      .data(data)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(0," + y(d.cause) + ")"; });

  bar.append("rect")
      .attr("width", function(d) { return x(d.number); })
      .attr("height", y.rangeBand());

  bar.append("text")
      .attr("class", "number")
      .attr("x", function(d) { return x(d.number); })
      .attr("y", y.rangeBand() / 2)
      .attr("dx", 3) //Number position
      .attr("dy", ".35em") //Position in the rect
      .attr("text-anchor", "start")
      .text(function(d) { return format(d.number); });

  cause.append("g")
      .attr("class", "x axis")
      .call(xAxis);

  cause.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  cause.append("text") //Y AXIS TEXT
    .attr("class", "y label")
    .attr("x", w / 3)
    .attr("dy", "-1.5em")
    .text("Cause of Deaths")
    .style("font-size","13px");        
});

我是d3 noobie。如果还有其他任何问题，请告诉我。

Answer 1

看起来您想要更改h变量，对吗？

它在这里使用：

bar.append("rect")
      .attr("width", function(d) { return x(d.number); })
      .attr("height", y.rangeBand());

定义每个条的高度。

所以说：

var m = [40, 20, 10, 145], //TRBL
    w = 400 - m[1] - m[3], //margin.right - margin.left
    h = 400 - m[0] - m[2]; //margin.top - margin.bottom

将400值更改为更小的值。它也将被纳入您的y值。

Answer 2

var x = d3.scale.linear().range([0, w]),

y = d3.scale.ordinal().rangeRoundBands([0, h], .2);

只需改变

y = d3.scale.ordinal().rangeRoundBands([0, h], .2); 
as 
// or
y = d3.scale.ordinal().rangeRoundBands([0, h], .5);
// or
y = d3.scale.ordinal().rangeRoundBands([0, h], .6);

根据您的选择。

更改d3.js条形图矩形大小

2 个答案: