Question

此处提供的代码http://jsfiddle.net/zeleniy/ea1uL7w9/

data = [47, 13, 61, 46, 26, 32, 6, 85, 1, 14, 86, 77, 13, 66, 0, 20, 11, 87, 5, 15];
data = [52, 33, 53, 45, 59, 45, 42, 50, 53, 50, 37, 45, 52, 50, 46, 48, 52, 56, 58, 59];
width = 300;
height = 100;

xScale = d3.scale.linear()
    .domain([0, data.length])
    .range([0, width]);
yScale = d3.scale.linear()
    .domain([d3.min(data), d3.max(data)])
    .range([0, height])

area = d3.svg.area()
    .interpolate("basis")
    .x(function(d, i) { return xScale(i); })
    .y0(function(d) { return yScale(-d / 2); })
    .y1(function(d) { return yScale(d / 2); });

svg = d3.select("#stream")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("path")
    .data([this.data])
    .enter()
    .append("path")
    .attr("transform", "translate(0," + (height / 2) + ")")
    .style("fill", "red")
    .attr("d", area);

第一个数据集图表绘制在svg元素的中心，正如我所期望的那样。但随着第二个数据集流转移到svg元素的顶部。我无法理解为什么。那为什么呢？

Answer 1

第一个数组包含接近0的值，它会打开你的范围。然后，这条线是将路径转移到打开窗口的软糖：

.attr("transform", "translate(0," + (height / 2) + ")")

那就是说，你是以一种令人困惑的方式设置你的音阶（至少对我来说）。我认为我的域名是我（绘制）数据集的最小值/最大值，在您的情况下为-max(d/2)和max(d/2)。此外，我还考虑到我的y尺度从正常情节中的底部到顶部。通过这些更改，您无需人工移动任何内容：

var dataMax = d3.max(data);
yScale = d3.scale.linear()
  .domain([ -dataMax/2, dataMax/2 ]) // real min/max of plotted data
  .range([height, 0]) //<- bottom to top, although it still works without this change...

在这个example中，我留下了一个重叠的轴用于说明。

d3.js.流图表随不同的数据集而变化。为什么呢？

1 个答案: