d3轴截止水平条形图

时间:2016-02-04 08:30:18

标签: javascript d3.js

enter image description here当我运行我的代码时,x和y轴标签会被切断,条形图会过早结束。任何想法如何纠正这一点。我想这与获取数据的范围来绘制SVG有关。我附上了图像的副本,你可以看到

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

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

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

var svg = d3.select("body").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("t.csv", function(data) {

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

  // Set the scale domain.
  x.domain([0, d3.max(data, function(d) { return d.count; })]);
  y.domain(data.map(function(d) { return d.primary_type; }));

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

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

  bar.append("text")
  .attr("class", "value")
  .attr("x", function(d) { return x(d.value); })
  .attr("y", y.rangeBand() / 2)
  .attr("dx", -3)
  .attr("dy", ".35em")
  .attr("text-anchor", "end")
  .text(function(d) { return format(d.value); });

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

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

</script>
</body>
</html>

0 个答案:

没有答案
相关问题