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);