d3与y轴数据的多线对齐

Question

我创建了d3多折线图。我设法生成了 x 和 y 轴以及线。但是很遗憾，我无法将路径线与Y轴（即ScaleBand()）对齐。我不知道该怎么做，为此的指导方针会很棒。我在代码段中附加了示例数据和代码。预先感谢。

var dataDomains = ['automated', 'manual']
var data = [
    { automated: 1000 , manual: 3000 },
    { automated: 5000 , manual: 6000 },
    { automated: 10000, manual: 9000 },
    { automated: 50000, manual: 12000 },
    { automated: 100000, manual: 15000 },
]


// set the dimensions and margins of the graph
        var margin = { top: 20, right: 20, bottom: 30, left: 50 },
            width = 960 - margin.left - margin.right,
            height = 200 - margin.top - margin.bottom;


        // set the ranges
        var x = d3.scaleLinear().range([0, width]);
        var y = d3.scaleBand().range([height, 0]);

        // define the 1st line
        var valueline = d3.line()
            .x(function (d) { return x(d.automated); })
            .y(function (d) { return y('automated'); });

        // define the 2nd line
        var valueline2 = d3.line()
            .x(function (d) { return x(d.manual); })
            .y(function (d) { return y('manual'); });

        // append the svg obgect to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("#cl-AVM").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

        // Scale the range of the data
        x.domain([0, d3.max(data, function (d) { return Math.max(d.automated, d.manual) })])
        y.domain(dataDomains);

        // Add the valueline path.
        svg.append("path")
            .data([data])
            .attr("class", "line")
            .attr("d", valueline);

        // Add the valueline2 path.
        svg.append("path")
            .data([data])
            .attr("class", "line")
            .style("stroke", "red")
            .attr("d", valueline2);

        // Add the X Axis
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        // Add the Y Axis
        svg.append("g")
            .call(d3.axisLeft(y));

       .line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="cl-AVM"></div>

Answer 1

您可以使用scalePoint而不是scaleBand，因为您的线可以被视为y轴上的一个点。

然后，您可以添加一些填充，以使两个点的值分别不是0和100（我选择了0.6，但是您可以尝试使用它，看看哪种最适合您）。

您可以在此处查看scalePoint的更多详细信息：https://observablehq.com/@d3/d3-scalepoint

希望有帮助！ ：）

var dataDomains = ['automated', 'manual']
var data = [
    { automated: 1000 , manual: 3000 },
    { automated: 5000 , manual: 6000 },
    { automated: 10000, manual: 9000 },
    { automated: 50000, manual: 12000 },
    { automated: 100000, manual: 15000 },
]


// set the dimensions and margins of the graph
        var margin = { top: 20, right: 20, bottom: 30, left: 50 },
            width = 960 - margin.left - margin.right,
            height = 200 - margin.top - margin.bottom;


        // set the ranges
        var x = d3.scaleLinear().range([0, width]);
        var y = d3.scalePoint().range([height, 0]).padding(0.6); // modified here

        // define the 1st line
        var valueline = d3.line()
            .x(function (d) { return x(d.automated); })
            .y(function (d) { return y('automated'); });

        // define the 2nd line
        var valueline2 = d3.line()
            .x(function (d) { return x(d.manual); })
            .y(function (d) { return y('manual'); });

        // append the svg obgect to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("#cl-AVM").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

        // Scale the range of the data
        x.domain([0, d3.max(data, function (d) { return Math.max(d.automated, d.manual) })])
        y.domain(dataDomains);
        
        // Add the valueline path.
        svg.append("path")
            .data([data])
            .attr("class", "line")
            .attr("d", valueline);

        // Add the valueline2 path.
        svg.append("path")
            .data([data])
            .attr("class", "line")
            .style("stroke", "red")
            .attr("d", valueline2);

        // Add the X Axis
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        // Add the Y Axis
        svg.append("g")
            .call(d3.axisLeft(y));

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="cl-AVM"></div>