d3js V6，如何使用多个左轴？答案

【问题标题】：d3js V6, how to use more than one left axis?d3js V6，如何使用多个左轴？
【发布时间】：2021-01-16 07:19:21
【问题描述】：

我的目标是一个具有多个 Y 轴的图表。示例如下

我尝试为第二个 Y 轴调用 d3.axisLeft().scale()，轴正在绘制但未缩放

var yscaleLvl = d3.scaleLinear()
            .domain([0, d3.max(chartData, function (d) { return (d.lvlData*1.2) /10.0; } )] )
            .range([height / 2, 0]);

        var yscaleVolume = d3.scaleLinear()
            .domain([0, d3.max(chartData, function (d) { return (d.volumeData * 1.2) / 10.0; })])
            .range([height / 2, 0]);
var y_axisLvl = d3.axisLeft().scale(yscaleLvl);
        svg.append("g")
            .attr("transform", "translate(50, 10)")
            .attr("stroke-width", 3.0)
            .call(y_axisLvl);

        
        var y_axisVolume = d3.axisLeft().scale(yscaleVolume);
        svg.append("g")
            .attr("transform", "translate(15, 10)")
            .attr("stroke-width", 3.0)
            .call(y_axisVolume);

有可能直接做，还是需要更棘手的方法？

【问题讨论】：

标签： javascript d3.js yaxis

【解决方案1】：

您发布的方式正是您添加多个轴的方式。

    const yScaleA = d3.scaleLinear().domain([0,1]).range([10,190])
    const yScaleB = d3.scaleLinear().domain([10,100]).range([10,190])
    
    const yAxisA = d3.axisLeft(yScaleA)
    const yAxisB = d3.axisLeft(yScaleB)
    
    const svg = d3.select('svg')
    
    svg.append('g').attr('transform','translate(100,0)').call(yAxisA)
    svg.append('g').attr('transform','translate(50,0)').call(yAxisB)

这里有一个minimal working example 来演示。

如果您没有达到此结果，则说明应用程序的其他地方存在错误。

【讨论】：