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

问题描述

我的目标是一个带有多个 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,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,3.0)
            .call(y_axisVolume);

可以直接使用，还是需要更复杂的方法？

解决方法

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

    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 来演示。

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

javascript yaxis