d3数据扩展问题

时间:2015-12-01 15:47:01

标签: javascript d3.js scale

过了一会儿,我终于想出了如何在d3线性中扩展数据。 但是,如果您查看以下屏幕截图,您可能会注意到数字似乎没有适当缩放: screenshot 所以:例如4.55和16.2几乎是相同的长度,它们不应该是(当我在0到565之间缩放时,4也应该更接近左边)

所以这就是我创建线性比例的方法:

var scaledData = d3.scale.linear()
                      .domain(d3.extent(data, function(d){return d.Betrag;})) 
                      .range([0, width-35]);

这就是我绘制条形图的方式:

var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

  bar.append("rect")
    .attr("width", function(d) { return scaledData(Math.abs(Math.round(d.Betrag))); })
    .attr("height", barHeight - 1);

  bar.append("text")
    .attr("x",function(d) { return scaledData(Math.abs(Math.round(d.Betrag)))+3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return Math.abs(d.Betrag); });
  });

我已尝试使用此部分scaledData(Math.abs(Math.round(d.Betrag)))来处理不同的事情,但无论我做什么都不会做我认为应该做的事情......也许作为一个新手,我仍然完全不理解尺度的事情...我认为问题来自于我如何设置域名。如果我用[0,2000]替换d3.extend函数,这一切都很好......

1 个答案:

答案 0 :(得分:1)

您必须显示您的数据以确定,但我认为您的数据中包含负值,因此您的域名似乎来自大约[-600,1800]。但是,当您计算宽度时,首先取数据的绝对值,因此最低可能值为0.解决方案在您的d3.extent访问器函数中,以评估数据的绝对值(如果是这样的话)实际上你想要的。)