d3js不绘制路径答案

【问题标题】：d3js dont drawing pathd3js不绘制路径
【发布时间】：2021-01-06 09:48:46
【问题描述】：

轴绘制得很好，但路径不可见。控制台中没有错误消息。请帮助了解问题出在哪里。

function Chart(id, data) {
        var chartData = JSON.parse(data);
        const height = 800;
        const width = 900;
        var svg = d3.select(id)
            .append("svg")
            .attr("width", width)
            .attr("height", height);
        var parseDate = d3.timeParse("%d.%m.%Y %H:%M:%S");
        var lineLvl = d3.line()
            .x(function (d) {
                return Date.parse(parseDate(d.timeData));
            })
            .y(function (d)
            {
                return d.lvlData;
            });
        var xscale =
            d3.scaleTime()
                .domain([Date.parse(parseDate(chartData[0].timeData))-60000,
                    Date.parse(parseDate(chartData[chartData.length - 1].timeData)) + 60000])
                .range([0, width*0.95]);
        var yscale = d3.scaleLinear()
            .domain([0, d3.max(chartData, function (d) { return d.lvlData*1.1; } )] )
            .range([height / 2, 0]);
        var x_axis = d3.axisBottom().scale(xscale)
            .tickFormat(d3.timeFormat("%H:%M"));
        svg.append("path")
            .attr("stroke", "blue")
            .attr("stroke-width", 2)
            .attr("fill", "none")
            .attr("d", lineLvl(chartData));
        var y_axis = d3.axisLeft().scale(yscale);
        svg.append("g")
            .attr("transform", "translate(50, 10)")
            .call(y_axis);
        var xAxisTranslate = height / 2 + 10;
        svg.append("g")
            .attr("transform", "translate(50, " + xAxisTranslate + ")")
            .call(x_axis);
    }

由这样的结构数组表示的数据

{"timeData":"17.07.2020 14:38:10","lvlData":"146575","temperatureData":"24","volumeData":"6155"}

【问题讨论】：

标签： json d3.js path jscript

【解决方案1】：

您需要在绘制数据时将比例应用于数据：

    var lineLvl = d3.line()
        .x(function (d) {
            return xscale(Date.parse(parseDate(d.timeData))); // run the x value through the x scale
        })
        .y(function (d)
        {
            return yscale(d.lvlData); // run the y value through the y scale
        });

您看不到错误的原因是因为线条已绘制，但使用未缩放的值，它与 SVG 相距很远。如果您检查 SVG，您会看到路径，它是绘制出来的，只是它的坐标反映的是原始数据，而不是缩放后的数据。

【讨论】：