無法在繪製圖表D3

Question

我試圖讓D3圖表互動線，在此之前我有圖表和一些div來用的ID圖。在ID我正在篩選數據，並試圖繪製的點擊，但沒有運氣

我是新來D3

由於其無法明白的地方是問題也

data4.json

{ 
"data_high":[ 
    { 
     "line_id": "i6_Line", 
     "line_name": "6 Line", 
     "mean": 73.400000000000006 
    }, 
    { 
     "line_id": "i5_Line", 
     "line_name": "5 Line", 
     "mean": 73.400000000000006 
    }, 
    { 
     "line_id": "i4_Line", 
     "line_name": "4 Line", 
     "mean": 73.400000000000006 
    }, 
    { 
     "line_id": "i3_Line", 
     "line_name": "3 Line", 
     "mean": 73.400000000000006 
    } 
    ] 
} 

data5.json

{ 
"data_low":[ 
    { 
     "line_id": "i6_Line", 
     "line_name": "6 Line", 
     "late_percent": 73.1, 
     "month": 1 
    }, 
    { 
     "line_id": "i6_Line", 
     "line_name": "6 Line", 
     "late_percent": 63.1, 
     "month": 1 
    }, 
    { 
     "line_id": "i5_Line", 
     "line_name": "5 Line", 
     "late_percent": 73.1, 
     "month": 1 
    }, 
    { 
     "line_id": "i4_Line", 
     "line_name": "4 Line", 
     "late_percent": 73.1, 
     "month": 1 
    }, 
    { 
     "line_id": "i3_Line", 
     "line_name": "3 Line", 
     "late_percent": 73.1, 
     "month": 1 
    } 
] 

}

HTML和腳本

<div id="timeseries"></div> 
    <div id="key"></div> 
    <script> 

     d3.json("data4.json", function(data){ 

      console.log(data); 

      var container_dimensions = {width: 900, height: 500}, 
       margins = {top: 10, right: 20, bottom: 50, left: 60}, 
       chart_dimensions = { 
       width: container_dimensions.width - margins.left - margins.right, 
       height: container_dimensions.height - margins.top - margins.bottom 
       }; 

      var chart = d3.select("#timeseries") 
       .append("svg") 
       .attr("width", container_dimensions.width) 
       .attr("height", container_dimensions.height) 
       .append("g") 
       .attr("transform", "translate(" + margins.left + "," + margins.top + ")") 
       .attr("id","chart"); 

      var time_scale = d3.time.scale() 
       .range([0,chart_dimensions.width]) 
       .domain([new Date(2008, 0, 1), new Date(2011, 3, 1)]); 

      var percent_scale = d3.scale.linear() 
       .range([chart_dimensions.height, 0]) 
       .domain([65,90]); 

      var time_axis = d3.svg.axis() 
       .scale(time_scale); 

      var count_axis = d3.svg.axis() 
       .scale(percent_scale) 
       .orient("left"); 

      chart.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + chart_dimensions.height + ")") 
       .call(time_axis); 

      chart.append("g") 
       .attr("class", "y axis") 
       .call(count_axis); 

      d3.select(".y.axis") 
       .append("text") 
       .attr("text-anchor","middle") 
       .text("percent on time") 
       //.attr("transform", "rotate (90)") 
       .attr("transform","rotate (-90, -88, 0) translate(-280)") 
       //.attr("x", chart_dimensions.height/2) 
       .attr("y", 50); 

      d3.select(".x.axis") 
       .append("text") 
       .attr("text-anchor","middle") 
       .text("Time") 
       // 
       .attr("transform","rotate (-90, 50,-90) translate(-490)") 
       //.attr("transform", "rotate (90,0,0)") 
       .attr("x", chart_dimensions.width/2) 
       .attr("y", 50); 

      var key_items = d3.select("#key") 
       .selectAll("div") 
       .data(data.data_high) 
       .enter() 
       .append("div") 
       .attr("class","key_line") 
       .attr("id",function(d){return d.line_id}); 

      key_items.append("div") 
       .attr("id", function(d){return "key_square_" + d.line_id}) 
       .attr("class", "key_square"); 

      key_items.append("div") 
       .attr("class","key_label") 
       .text(function(d){return d.line_name}); 

      d3.selectAll(".key_line").on("click", get_timeseries_data); 

      function get_timeseries_data(){ 
       // get the id of the current element 
       var id = d3.select(this).attr("id"); 
       // see if we have an associated time series 
       var ts = d3.select("#"+id+"_path"); 
       console.log(ts); 
       if (ts.empty()){ 
        d3.json("data5.json", function(data){ 
         console.log("======= " +data); 
         filtered_data = data.data_low.filter(function(d){return d.line_id === id}); 
         console.log(filtered_data); 
         draw_timeseries(filtered_data, id); 
        }) 
       } else { 
        ts.remove(); 
       } 
      } 

      function draw_timeseries(data, id){ 

       var line = d3.svg.line() 
        .x(function(d){return time_scale(d.time)}) 
        .y(function(d){return percent_scale(d.late_percent)}) 
        .interpolate("linear"); 

       var g = d3.select("#chart") 
        .append("g") 
        .attr("id", id + "_path") 
        .attr("class", id.split("_")[1]); 

       g.append("path") 
        .attr("d", line(75)); 
      } 

     }); 

我不得不這樣做編碼，原因如下： 當我在DIV請點擊此處（複選框或文本文本框旁邊），它應該繪製一張圖表，但其行爲不如我預期。

fiddle

Answer 1

有幾個問題：

• 數據未添加到路徑

   g.append("path") 
        .datum(data) //<--this 
        .attr("class", "line") 
        .attr("d", line); 
  

• 沒有物業數據稱爲 '時間'

   var line = d3.svg.line() 
         .x(function(d){return time_scale(d.time)}) // <-- this 
         .y(function(d){return percent_scale(d.late_percent)}) 
         .interpolate("linear"); 
  

  time_scale預計日期對象：

    x(function(d) { 
         var date = (new Date()); 
         date.setMonth(d.month); 
         date.setYear(2008); 
         return time_scale(date) 
        }) 
  

• 類應該被分配到路徑

檢查https://jsfiddle.net/vcuo9x4e/，我已經添加了「i6_Line」和「i5_Line」更多的數據，因爲他們剛一每個數據點。