D3.js：訪問對象屬性的內部數組用於創建線圖

我試圖創建一個使用d3.js具有該數據結構的線圖：D3.js：訪問對象屬性的內部數組用於創建線圖

 

    var dataset1 = [ 
      {"video_name": "Apples", "video_views": 100}, 
      {"video_name": "Oranges", "video_views": 35}, 
      {"video_name": "Grapes", "video_views": 20}, 
      {"video_name": "Avocados", "video_views": 85}, 
      {"video_name": "Tomatoes", "video_views": 60} 
     ]

對象的索引號是x -value和「video_views」是y值。

問題：它附加了svg畫布和「g」元素，但圖中每個點的x和y值都沒有被檢測到，所以沒有出現。

 

     // Scale values 
    var Line_xScale = d3.scale.linear() 
     .domain([0, 100]) 
     .range([0, Line_Graph_Width]); 

    var Line_yScale = d3.scale.linear() 
     .domain([0, 100]) 
     .range([0, Line_Graph_Height]); 


    // This is where I suspect the problem is. // 

    // SVG path equal to line 
    var Path_Var = d3.svg.line() 
     .x(function(d, i) { 
      return i * 10; 
     }) 
     .y(function(d) { 
      return Line_yScale(d.video_views); 
     }); 

    // Connect Element with Data 
    group.selectAll('path') 
     .data(dataset1) 
     .enter() 
     .append('path') 
      .attr('d', Path_Var) 
      .attr('fill', 'none') 
      .attr('stroke', '#fff') 
      .attr('stroke-width', 2);

任何幫助表示讚賞。謝謝閱讀。

來源

2014-06-09 dmr07

剛剛更改爲.x（函數...返回i * 10;仍然沒有運氣 – dmr07

筆畫是白色的，但背景是藍色的 – dmr07

一種可能的解決方案：

對象的索引號是x值...：X標尺的domain改變爲輸入索引的陣列使用d3.range()：

// Scale values 
var Line_xScale = d3.scale.linear() 
    .domain(d3.range(dataset1.length)) 
    .range([0, Line_Graph_Width]);

...而「video_views」是y值。：range被改變，以更大的值是在頂部：線的

var Line_yScale = d3.scale.linear() 
    .domain([0, 100]) 
    .range([Line_Graph_Height, 0]);

x值被改變，以計算一個點的寬度：

var Path_Var = d3.svg.line() 
    .x(function(d, i) { 
     return i * Line_Graph_Width/dataset1.length; 
    }) 
    .y(function(d) { 
     return Line_yScale(d.video_views); 
    });

和線路利用被附加：

group.append('path') 
     .attr('d', Path_Var(dataset1)) 
     .attr('fill', 'none') 
     .attr('stroke', '#000') 
     .attr('stroke-width', 2);

stroke #fff是白色的，所以即使一切正常，你都不會看到任何東西。

請參閱example at jsbin。

使用group.selectAll('path').data(dataset1).enter().append('path')您不僅會添加一個路徑，而且會添加dataset1.length路徑元素。

來源

2014-06-09 21:40:31

老兄，我想給你一個擁抱。就像過去3天沒有進展一樣，問題解決了，謝謝！ – dmr07

可以定義xScale等爲[0 - 100]，但值是[0 - 400]和出SVG視圖，如從0

.x(function(d, i) { 
     return i * 100; 
    })

xScale等的嘗試設定範圍設定爲400

來源

2014-06-09 20:38:50 dsuess

D3.js：訪問對象屬性的內部數組用於創建線圖

回答

相關問題