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年3月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);