score:2

Accepted answer

You could use a scalePoint instead of a scaleBand as your line can be considered as just a point on the y axis.

Then you can add some padding so that the values for the two points are not 0 and 100 (I picked 0.6 but you can play around with it and see what best suits you).

You can see usage of scalePoint here in more details: https://observablehq.com/@d3/d3-scalepoint

Hope that helps ! :)

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>


Related Query