Question

我正在整理D3垂直条形图，无法调整条形高度。当我从以下javascript调整barHeight变量时，渲染时条形看起来完全相同。这意味着如果我在*50中取消barHeight，则不会有任何改变。我可能会忽略一些非常简单的东西，但我该如何调整高度呢？

  var bars = svg.selectAll("rect")
     .data(data_votes);
     bars.enter()
     .append("rect")
     // .transition()
     //   .duration(1000);

     bars.attr("x", function(d, i) {
        return i * (w / data_votes.length); 

     })
     .attr("y", function(d){
        return h-d; 
     })
     // Less bars == more width
     .attr("width", w / data_votes.length - barPadding)
     .attr("height", function(d){
        var barHeight = d*50; 
        return barHeight; 
     })

     .attr("fill", "teal");

     bars.exit().remove();

Answer 1

这是一个包含一些更正代码的工作示例：

http://tributary.io/inlet/5767993 （您可以单击任何数字并使用滑块更改它以查看它对输出的影响）

我认为主要问题是需要将比例因子应用于“y”属性和height属性。

Answer 2

你是对的，我正在用高度调整偏移量，所以当高度像素实际上增加时，它会按比例偏移并隐藏在svg画布的边缘。

以下是我调整它的方式

 .attr("y", function(d){
    return h-(d*4); 
 })
 // Less bars == more width
 .attr("width", w / data_votes.length - barPadding)
 .attr("height", function(d) {
    return d * 4 ;

 })

调整D3图表栏高度

2 个答案: