Question

我正在使用d3创建一个“趋势”分析条形图。此图表中间有一个X轴，可以在此轴上方或下方延伸的条形表示百分比变化。我通过使用3个刻度来完成此操作 - X轴的序数和Y轴的两个线性刻度。使用两个线性标度是我不确定的。它似乎不优雅，只是“不对。”

有问题的尺度：

this.pyscale.domain([0, 1]);
this.pyscale.rangeRound([this.height/2, 0]);

this.nyscale.domain([-1, 0]);
this.nyscale.rangeRound([this.height, this.height/2]);

与绘制条形相关的函数：

bar.append("rect")
   .attr("y", function(d) { 
        if (d[that.ycol] >= 0) {
            return that.pyscale(d[that.ycol]);
        }
        return that.height/2; 
    })
   .attr("height", function(d) { 
        if (d[that.ycol] >= 0) {
            return that.height/2 - that.pyscale(d[that.ycol]);
        }
        return that.nyscale(d[that.ycol]) - that.height/2;
    })
   .attr("width", this.xscale.rangeBand())

这是一个体面的方式吗？或者是否有一种更优雅的方式使用我缺少的Y量表？

感谢您的时间。

Answer 1

根据您的描述，听起来您应该能够用一个刻度替换您的两个刻度，就像这样：

this.yscale.domain([-1, 1]);
this.yscale.rangeRound([this.height, 0]);

并在其余代码中使用this.yscale。

D3条形图并使用多个刻度

1 个答案: