javascript - D3 V4 - 尝试绘制简单的折线图

Question

我正在努力在 D3 (V4) 中绘制简单的折线图...

我的数据如下所示，我相信它很好，因为我可以使用 d3.timeParse() 来解析日期，并且它们 console.log 很好:

var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");

数据格式

            $myObj = (object)[];
            $myObj->name = $row['CH_FREQ'];
            $myObj->value = $row['RX_POWER'];
            $myObj->date = $row['CREATED_AT'];
            $chartData_RX_Down[] = $myObj;

例如:日期、名称、值 - 可能是:2017-03-22 12:20:02、名称、-0.2

大多数日期都是负数。

图表代码:

    // SA MAC Plot Chart - API Doco: http://devdocs.io/d3~4/
    function plotChart(data) {
        $('#chartContainer').empty();

        // Color Scale
        var magma = d3.scaleSequential(d3.interpolateMagma).domain([0,7]);


        // Set the Dimensions and Margins of the Graph
        var margin = {top: 20, right: 20, bottom: 40, left: 60},
            width = 580,
            height = 230;


        // x-Scale with Time Width
        var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");      // D3 Expected Date Format
        var x = d3.scaleTime()
            .domain(d3.extent(data, function(d) { return parseDate(d.date); }))
            .range([0, width]);


        // y-Scale
        var y = d3.scaleLinear()
            .domain([0, d3.max(data, function(d) { return d.value; })])
            .range([height, 0]);



        // append the svg object to the body of the page
        // append a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("#chartContainer").append("svg")
            .attr("width", "100%")
            .attr("height", "300px")
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");




       // append the rectangles for the bar chart
        svg.selectAll("path")
            .data(data)
            .enter().append("path")
            .attr("x", function(d) { return d.date; })
            .attr("y", function(d) { return d.value; });



        // X-Axis
        svg.append("g")
            .attr("class", "axis_x")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x).tickPadding(5).tickSize(10));


        // Y-Axis
        svg.append("g")
            .attr("class", "axis_y")
            .call(d3.axisLeft(y).ticks(5).tickPadding(5).tickSize(10));


        // X-Axis Text
        svg.append("text")
            .attr("class", "d3_X_Axis_Text")
            .attr("x", 0)
            .attr("y", 0)
            .attr("fill", "white")
            .attr("transform", "translate(" + (width/2) + " ," + (height + margin.top + 20) + ")")
            .style("text-anchor", "middle")
            .text("Date Time");


        // Y-Axis Text
        svg.append("text")
            .attr("class", "d3_Y_Axis_Text")
            .attr("x", -130)
            .attr("y", -42.5)
            .attr("fill", "white")
            .attr("transform", "rotate(-90)")
            .style("text-anchor", "middle")
            .text("CM DownStream Bytes Received");
    }

我在屏幕上看到一个图表，其中包含日期 X 轴和数字 0 到 -6 Y 轴，因此 D3 正在工作并尝试显示图表 - 我只是没有看到任何数据/线条。

注意:我正在寻找折线图。

我认为该问题与以下代码有关:

       // append the rectangles for the bar chart
        svg.selectAll("path")
            .data(data)
            .enter().append("path")
            .attr("x", function(d) { return d.date; })
            .attr("y", function(d) { return d.value; });

我也尝试了以下方法:

        // append the rectangles for the bar chart
        svg.selectAll("path")
            .data(data)
            .enter().append("path")
            .attr("x", function(d) { return d.date; })
            .attr("y", function(d) { return d.value; });

任何帮助将不胜感激!!

干杯 亚当

Answer 1

SVG 路径元素没有 x 和 y 属性。您应该配置它的 d 属性(路径描述)。 请参阅此处 - developer.mozilla.org/en-US/docs/Web/SVG/Element/path

代码:

var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

 svg.selectAll("path")
      .data(data)
      .enter().append("path")
      .attr("class", "line")
      .attr("d", valueline);