मैंने 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>
-1
ARr0w 1 अप्रैल 2020, 12:18

1 उत्तर

सबसे बढ़िया उत्तर

आप स्केलबैंड के बजाय स्केलपॉइंट का उपयोग कर सकते हैं क्योंकि आपकी लाइन को y अक्ष पर सिर्फ एक बिंदु के रूप में माना जा सकता है।

फिर आप कुछ पैडिंग जोड़ सकते हैं ताकि दो बिंदुओं के लिए मान 0 और 100 न हों (मैंने 0.6 चुना लेकिन आप इसके साथ खेल सकते हैं और देख सकते हैं कि आपको सबसे अच्छा क्या सूट करता है)।

आप यहां स्केलपॉइंट के उपयोग को अधिक विवरण में देख सकते हैं: https://observablehq.com/@d3/d3 -स्केलपॉइंट

उम्मीद है की वो मदद करदे ! :)

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>
1
Rémi Sanchez 1 अप्रैल 2020, 11:26