線圖 - 未顯示

我在理解d3.svg.line（）命令如何工作，如果需要與路徑組合或不組合時，存在問題。
我一直在試圖畫一個使用由兩列（天，溫度）與數值的兩列csv繪製線圖，但我不明白爲什麼代碼不顯示任何東西。線圖 - 未顯示

的jsfiddle這裏：在代碼工作http://jsfiddle.net/UjhjY/

var line = svg.selectAll("line") 
        .data(dataset) 
        .enter() 
        .append("line") 
        .interpolate("linear") 
        .x(function (i) { return xScale(i); }) 
        .y(function (d) { return yScale(d[1]); }); 

     var path = svg.append("path") 
      .attr("d", line(dataset)) 
      .attr("stroke", "blue") 
      .attr("stroke-width", 2) 
      .attr("fill", "none");

雖然瀏覽器不顯示出比SVG文件以外的任何。我對現在該做什麼感到無能爲力。任何幫助和解釋都會得到真正的讚賞，因爲我讀了幾乎所有關於線條和路徑的東西，但無法使其工作。

來源

2013-10-05 tomtomtom

請給數據集哪一個使用 –

對不起，我完全忘了！我現在編輯jsfiddle鏈接編輯：完成，它在小提琴的外部資源中鏈接！ – tomtomtom

也給所需的輸出圖像/想法 –

你的代碼有幾個問題。首先，d3.csv是一個異步回調，你不能像var dataset = d3.csv("line_graph.csv");那樣使用它。它需要的第二個參數是一個可以訪問數據的函數。代碼需要看起來像這樣。

d3.csv("file.csv", function(error, data) { 
    // create graph 
});

您可能還想將從CSV中解析出來的數據從字符串轉換爲實際的數據格式，例如，對於數字

data.forEach(function(d) { 
    d.temperature = +d.temperature; 
});

設置您的比例時，請確保您參考了正確的數據部分。你可能想要類似

var yScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function (d) { return d.temperature; })]) 
    .range([0, height]);

而不是返回d[1]。

然後，要創建該行，您需要一個line generator。這將會像這樣設置。

var line = d3.svg.line() 
    .x(function(d) { return xScale(d.date); }) 
    .y(function(d) { return yScale(d.temperature); });

然後，您可以使用線條生成器來創建路徑。

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

這些只是讓我感到最明顯的問題。這是一個example，它非常接近你正在尋找的東西。我強烈建議您閱讀一些教程和示例。

來源

2013-10-05 10:35:39

感謝您的快速回復，我看到了我的代碼存在的問題，我添加了var數據集以使x和y Scale中的數據集響應一個變量，如： var xScale = d3.scale.ordinal（）。域（d3.range（dataset.length）） .range（[0，width]）; 我不知道如何處理這個 – tomtomtom

你看看這個例子嗎？你應該能夠使用它幾乎未修改爲您的目的。 –

我做過了，對不起，因爲這是一個麻煩和感謝，這就像我想要做的;但我只是想了解我的代碼中的問題，或者如何引用回調中的外部數據集 – tomtomtom

線圖 - 未顯示

回答

相關問題