Question

嗨，我是d3js的新手，所以我正在尝试简单的示例代码

所以这里是代码

d3.selectAll("div")
    .data([100,180,200,400,450])
    .transition()
    .duration(2000)
    .style("width", function(d) { return  d +"px"; });

http://jsfiddle.net/YjED4/

我想要实现的是将图表的大小动态设置为我传递的最大数据的长度，即图表最大长度应该是最大比例0-500，因为我已经通过的最大数据是450

问题是当我传递像

这样的数据时

.data([1,18,20,40,4])

我得到一张这样的图表

http://jsfiddle.net/NnLU9/

胜过图表的目的。

因此，任何有关如何继续进行此操作的指示都会有所帮助

Answer 1

D3是一项了不起的技术，我希望你能坚持下去。

您的代码存在的问题是它没有x轴或y轴的概念，您的代码只有数据可以按像素更改宽度。没有x或y轴，您的图表将无法正确缩放。

您的代码中需要这样的内容：

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

代码段指出值是0到数据集的最大值，像素范围是0像素到420像素。因此，如果您的最大值为40，那么40将映射到420像素。

然后以下内容将缩放您的图表：

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

注意说return x(d) + 'px'的代码，当你传递一个值时，它会说'20'进入函数x（d）它会将它缩放到你将x轴缩放到的任何值。所以'20'在上面的函数中将是210像素，'0'将是0像素，'40'将是'420'像素。

这是我以前在d3开始的例子，我认为Mike Bostock可以比任何人更好地解释它：http://bost.ocks.org/mike/bar/

希望这有帮助。

如何设置图表尺寸以根据给定数据进行更改

1 个答案: