D3.js：多折線圖中，相同的X（時間），顯示不同的Y（價格）

我想兩個D3.js例子鼠標懸停結合起來，我發現這裏 bl.ocks.org/mbostock/1157787（例如倍數），這裏是bl.ocks.org/mbostock/3902569（鼠標懸停示例）。D3.js：多折線圖中，相同的X（時間），顯示不同的Y（價格）

到目前爲止，一切都按預期工作。鼠標懸停焦點通過x（時間）在所有圖表上鍊接，同時在每張圖表上顯示價格值。然而，顯示的數值和位置是由最後一個圖表的數據顯示的，這些數據在所有其他圖表上顯示錯誤的位置和數值我試圖弄清楚的是如何用自己的價值觀和焦點位置來解決每一張圖表。我發現了幾個類似的問題，涉及多個圖表和多個鼠標懸停焦點位置，但不是兩個主題相結合。我是JS和D3的新手，所以我不知道如何將正確的值賦給正確的焦點對象。看到這裏http://plnkr.co/edit/btAPsU0ra6uR3f4ZXZWj。這裏是我的代碼

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    font: 10px sans-serif; 
    margin: 0; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    //shape-rendering: crispEdges; 
} 

.line { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
} 

.area { 
    //fill: #e7e7e7; 
    fill: transparent; 
} 

.overlay { 
    fill: none; 
    pointer-events: all; 
} 

.focus circle { 
    fill: none; 
    stroke: steelblue; 
} 
</style> 
<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
<script> 

var margin = {top: 8, right: 10, bottom: 20, left: 30}, 
    width = 960 - margin.left - margin.right, 
    height = 138 - margin.top - margin.bottom; 

var parseDate = d3.time.format("%b %Y").parse, 
    bisectDate = d3.bisector(function(d) { return d.date; }).left, 
    formatValue = d3.format(",.2f"), 
    formatCurrency = function(d) { return formatValue(d); }; 

var x = d3.time.scale() 
    .range([0, width]); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var area = d3.svg.area() 
    .x(function(d) { return x(d.date); }) 
    .y0(height) 
    .y1(function(d) { return y(d.price); }); 

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

var xAxis = d3.svg.axis() 
    .scale(x)   // x is the d3.time.scale() 
    .orient("bottom") // the ticks go below the graph 
    .ticks(4);  // specify the number of ticks 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(4); 

d3.csv("stocks_chart2.csv", type, function(error, data) { 

    // Nest data by symbol. 
    var symbols = d3.nest() 
     .key(function(d) { return d.symbol; }) 
     .entries(data); 

    // Compute the maximum price per symbol, needed for the y-domain. 
    symbols.forEach(function(s) { 
    s.maxPrice = d3.max(s.values, function(d) { return d.price; }); 
    }); 

    // Compute the minimum and maximum date across symbols. 
    // We assume values are sorted by date. 
    x.domain([ 
    d3.min(symbols, function(s) { return s.values[0].date; }), 
    d3.max(symbols, function(s) { return s.values[s.values.length - 1].date; }) 
    ]); 

    // Add an SVG element for each symbol, with the desired dimensions and margin. 
    var svg = d3.select("body").selectAll("svg") 
     .data(symbols) 
    .enter().append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    // Add the area path elements. Note: the y-domain is set per element. 
    svg.append("path") 
     .attr("class", "area") 
     .attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); }); 

    // Add the line path elements. Note: the y-domain is set per element. 
    svg.append("path") 
     .attr("class", "line") 
     .attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); }); 

    // Add a small label for the symbol name. 
    svg.append("text") 
     .attr("x", width - 6) 
     .attr("y", height - 6) 
     .style("text-anchor", "end") 
     .text(function(d) { return d.key; }); 

    svg.append('g')   // create a <g> element 
     .attr('class', 'x axis') // specify classes 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis);   // let the axis do its thing 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Value"); 

    var focus = svg.append("g") 
     .attr("class", "focus") 
     .style("display", "none"); 

    focus.append("circle") 
     .attr("r", 4.5); 

    focus.append("text") 
     .attr("x", 9) 
     .attr("dy", ".35em"); 

    svg.append("rect") 
     .attr("class", "overlay") 
     .attr("width", width) 
     .attr("height", height) 
     .on("mouseover", function() { focus.style("display", null); }) 
     .on("mouseout", function() { focus.style("display", "none"); }) 
     .on("mousemove", mousemove); 

    function mousemove() { 
    var x0 = x.invert(d3.mouse(this)[0]), 
     i = bisectDate(data, x0, 1), 
     d0 = data[i - 1], 
     d1 = data[i], 
     d = x0 - d0.date > d1.date - x0 ? d1 : d0; 
    focus.attr("transform", "translate(" + x(d.date) + "," + y(d.price) + ")"); 
    focus.select("text").text(formatCurrency(d.price)); 
    } 

}); 

function type(d) { 
    d.price = +d.price; 
    d.date = parseDate(d.date); 
    return d; 
} 

</script>

，並作爲倍數示例中使用的data.csv（縮短）

symbol,date,price 
S&P 500,Jan 2000,1394.46 
S&P 500,Feb 2000,1366.42 
S&P 500,Mar 2000,1498.58 
S&P 500,Apr 2000,1452.43 
S&P 500,May 2000,1420.6 
S&P 500,Jun 2000,1454.6 
S&P 500,Jul 2000,1430.83 
S&P 500,Aug 2000,1517.68 
S&P 500,Sep 2000,1436.51 
S&P 500,Oct 2000,1429.4 
S&P 500,Nov 2000,1314.95 
S&P 500,Dec 2000,1320.28 
S&P 500,Jan 2001,1366.01 
S&P 500,Feb 2001,1239.94 
S&P 500,Mar 2001,1160.33 
S&P 500,Apr 2001,1249.46 
S&P 500,May 2001,1255.82 
S&P 500,Jun 2001,1224.38 
S&P 500,Jul 2001,1211.23 
S&P 500,Aug 2001,1133.58 
S&P 500,Sep 2001,1040.94 
S&P 500,Oct 2001,1059.78 
S&P 500,Nov 2001,1139.45 
S&P 500,Dec 2001,1148.08 
S&P 500,Jan 2002,1130.2 
S&P 500,Feb 2002,1106.73 
S&P 500,Mar 2002,1147.39 
S&P 500,Apr 2002,1076.92 
S&P 500,May 2002,1067.14 
S&P 500,Jun 2002,989.82 
S&P 500,Jul 2002,911.62 
S&P 500,Aug 2002,916.07 
S&P 500,Dec 2008,903.25 
S&P 500,Jan 2009,825.88 
S&P 500,Feb 2009,735.09 
S&P 500,Mar 2009,797.87 
S&P 500,Apr 2009,872.81 
S&P 500,May 2009,919.14 
S&P 500,Jun 2009,919.32 
S&P 500,Jul 2009,987.48 
S&P 500,Aug 2009,1020.62 
S&P 500,Sep 2009,1057.08 
S&P 500,Oct 2009,1036.19 
S&P 500,Nov 2009,1095.63 
S&P 500,Dec 2009,1115.1 
S&P 500,Jan 2010,1073.87 
S&P 500,Feb 2010,1104.49 
S&P 500,Mar 2010,1140.45 
MSFT,Jan 2000,39.81 
MSFT,Feb 2000,36.35 
MSFT,Mar 2000,43.22 
MSFT,Apr 2000,28.37 
MSFT,May 2000,25.45 
MSFT,Jun 2000,32.54 
MSFT,Jul 2000,28.4 
MSFT,Aug 2000,28.4 
MSFT,Sep 2000,24.53 
MSFT,Oct 2000,28.02 
MSFT,Nov 2000,23.34 
MSFT,Dec 2000,17.65 
MSFT,Jan 2001,24.84 
MSFT,Feb 2001,24 
MSFT,Mar 2001,22.25 
MSFT,Apr 2001,27.56 
MSFT,Aug 2009,24.43 
MSFT,Sep 2009,25.49 
MSFT,Oct 2009,27.48 
MSFT,Nov 2009,29.27 
MSFT,Dec 2009,30.34 
MSFT,Jan 2010,28.05 
MSFT,Feb 2010,28.67 
MSFT,Mar 2010,28.8 
AMZN,Jan 2000,64.56 
AMZN,Feb 2000,68.87 
AMZN,Mar 2000,67 
AMZN,Apr 2000,55.19 
AMZN,May 2000,48.31 
AMZN,Jun 2000,36.31 
AMZN,Jul 2000,30.12 
AMZN,Aug 2000,41.5 
AMZN,Sep 2000,38.44 
AMZN,Oct 2000,36.62 
AMZN,Nov 2000,24.69 
AMZN,Dec 2000,15.56 
AMZN,Jan 2001,17.31 
AMZN,Feb 2001,10.19 
AMZN,Mar 2001,10.23 
AMZN,Apr 2001,15.78 
AMZN,May 2001,16.69 
AMZN,Jun 2001,14.15 
AMZN,Jul 2001,12.49 
AMZN,May 2007,69.14 
AMZN,Jun 2007,68.41 
AMZN,Jul 2007,78.54 
AMZN,Aug 2007,79.91 
AMZN,Sep 2007,93.15 
AMZN,Oct 2007,89.15 
AMZN,Nov 2007,90.56 
AMZN,Dec 2007,92.64 
AMZN,Jan 2008,77.7 
AMZN,Feb 2008,64.47 
AMZN,Mar 2008,71.3 
AMZN,Apr 2008,78.63 
AMZN,May 2008,81.62 
AMZN,Jun 2008,73.33 
AMZN,Jul 2008,76.34 
AMZN,Aug 2008,80.81 
AMZN,Sep 2008,72.76 
AMZN,Oct 2008,57.24 
AMZN,Nov 2008,42.7 
AMZN,Dec 2008,51.28 
AMZN,Jan 2009,58.82 
AMZN,Feb 2009,64.79 
AMZN,Mar 2009,73.44 
AMZN,Apr 2009,80.52 
AMZN,May 2009,77.99 
AMZN,Jun 2009,83.66 
AMZN,Jul 2009,85.76 
AMZN,Aug 2009,81.19 
AMZN,Sep 2009,93.36 
AMZN,Oct 2009,118.81 
AMZN,Nov 2009,135.91 
AMZN,Dec 2009,134.52 
AMZN,Jan 2010,125.41 
AMZN,Feb 2010,118.4 
AMZN,Mar 2010,128.82 
IBM,Jan 2000,100.52 
IBM,Feb 2000,92.11 
IBM,Mar 2000,106.11 
IBM,Jun 2003,75.42 
IBM,Jul 2003,74.28 
IBM,Aug 2003,75.12 
IBM,Sep 2003,80.91 
IBM,Mar 2009,95.09 
IBM,Apr 2009,101.29 
IBM,May 2009,104.85 
IBM,Jun 2009,103.01 
IBM,Jul 2009,116.34 
IBM,Aug 2009,117 
IBM,Sep 2009,118.55 
IBM,Oct 2009,119.54 
IBM,Nov 2009,125.79 
IBM,Dec 2009,130.32 
IBM,Jan 2010,121.85 
IBM,Feb 2010,127.16 
IBM,Mar 2010,125.55 
GOOG,Aug 2004,102.37 
GOOG,Sep 2004,129.6 
GOOG,Oct 2004,190.64 
GOOG,Nov 2004,181.98 
GOOG,Dec 2004,192.79 
GOOG,Jan 2005,195.62 
GOOG,Feb 2005,187.99 
GOOG,Mar 2005,180.51 
GOOG,Apr 2005,220 
GOOG,May 2005,277.27 
GOOG,Jun 2005,294.15 
GOOG,Jul 2005,287.76 
GOOG,Aug 2005,286 
GOOG,Sep 2005,316.46 
GOOG,Oct 2005,372.14 
GOOG,Nov 2005,404.91 
GOOG,Dec 2005,414.86 
GOOG,Jan 2006,432.66 
GOOG,Feb 2006,362.62 
GOOG,Mar 2006,390 
GOOG,Apr 2006,417.94 
GOOG,May 2006,371.82 
GOOG,Jun 2006,419.33 
GOOG,Jul 2006,386.6 
GOOG,Aug 2006,378.53 
GOOG,Sep 2006,401.9 
GOOG,Oct 2006,476.39 
GOOG,Nov 2006,484.81 
GOOG,Jul 2009,443.05 
GOOG,Aug 2009,461.67 
GOOG,Sep 2009,495.85 
GOOG,Oct 2009,536.12 
GOOG,Nov 2009,583 
GOOG,Dec 2009,619.98 
GOOG,Jan 2010,529.94 
GOOG,Feb 2010,526.8 
GOOG,Mar 2010,560.19 
10 Year T-Note,Jan 2000,6.67 
10 Year T-Note,Feb 2000,6.41 
10 Year T-Note,Mar 2000,6.02 
10 Year T-Note,Apr 2000,6.21 
10 Year T-Note,May 2000,6.28 
10 Year T-Note,Jun 2000,6.02 
10 Year T-Note,Jul 2000,6.03 
10 Year T-Note,Aug 2000,5.73 
10 Year T-Note,Sep 2000,5.78 
10 Year T-Note,Oct 2000,5.76 
10 Year T-Note,Nov 2000,5.44 
10 Year T-Note,Dec 2000,5.11 
10 Year T-Note,Jan 2001,5.18 
10 Year T-Note,Feb 2001,4.91 
10 Year T-Note,Mar 2001,4.91 
10 Year T-Note,Apr 2001,5.34 
10 Year T-Note,May 2001,5.41 
10 Year T-Note,Jun 2001,5.39 
10 Year T-Note,Jul 2001,5.04 
10 Year T-Note,Aug 2001,4.82 
10 Year T-Note,Sep 2001,4.57 
AAPL,Jan 2000,25.94 
AAPL,Feb 2000,28.66 
AAPL,Mar 2000,33.95 
AAPL,Apr 2000,31.01 
AAPL,May 2000,21 
AAPL,Jun 2000,26.19 
AAPL,Jul 2000,25.41 
AAPL,Aug 2000,30.47 
AAPL,Sep 2000,12.88 
AAPL,Oct 2000,9.78 
AAPL,Nov 2000,8.25 
AAPL,Dec 2000,7.44 
AAPL,Jan 2001,10.81 
AAPL,Feb 2001,9.12 
AAPL,Mar 2001,11.03 
AAPL,Apr 2001,12.74 
AAPL,May 2001,9.98

任何幫助將不勝感激！謝謝！

來源

2015-09-11 Kai

我還沒有完全得到這個工作，但我相信這應該讓你開始。你在做什麼不工作的原因是因爲你在所有圖表中共享一段數據d。

function mousemove() { 
    var date = x.invert(d3.mouse(this)[0]), 
     index = bisectDate(data, date, 1), 
     d0 = data[index - 1], 
     d1 = data[index], 
     d = date - d0.date > d1.date - date ? d1 : d0; 
    focus.attr("transform", "translate(" + x(d.date) + "," + y(d.price) + ")"); 
    focus.select("text").text(formatCurrency(d.price));

所以這裏這段代碼是選擇所有focus項目，你正在使用你的工具提示，但應用格式的貨幣對。但是，如果你看看這個，驅動價格的d直接來自鼠標移動的數據。

相反，您需要做的是分別爲每個焦點項目分配數據。我還沒有完全得到這充分不幸的是工作，我還沒有找到了如何index計算，但是這給了這個想法：

function mousemove() { 
    var date = x.invert(d3.mouse(this)[0]), 
    index = bisectDate(data, date, 1), 
    d0 = data[index - 1], 
    d1 = data[index], 
    d = date - d0.date > d1.date - date ? d1 : d0; 

    var focus = svg.selectAll(".focus"); 

    focus.attr("translate", function(d) { 
     return "translate(" + x(d.values[index].date) + "," + y(d.values[index].price) + ")" 
    }); 

    focus.selectAll("text", function(d) { 
     return formatCurrency(d.values[index].price); 
    }); 
}

那麼，什麼是怎麼回事是每個focus項目都有自己的翻譯和文本是專門從驅動該系列的數據中設置的。 d參數現在被限定範圍（並且將在D3之前的數據綁定後自動提供）到這些函數，並將用於訪問您想要的實際數據。

來源

2015-09-14 12:18:17 Ian

非常感謝！我正在取得進展。我似乎正在收集正確的值（請參閱下面的console.log）。然而，雖然這些值似乎是正確的，但focus屬性的transform/translate函數以及它的text屬性似乎已被打破。任何提示？請參閱http://plnkr.co/edit/u6OsFvnDDt4jwljyVyr5?p=preview。謝謝！ – Kai

@凱你是索引不正確。它對我來說顯示了錯誤的值（當我在圖的最右側時，似乎也只是數據集的一部分。） – Ian

你說得對，那就是我說的問題。 out line 163：return「翻譯索引和值，如console.log所示（請參閱http://plnkr.co/edit/u6OsFvnDDt4jwljyVyr5?p=preview）。返回結果「翻譯[...]」我無法弄清楚 – Kai

D3.js：多折線圖中，相同的X（時間），顯示不同的Y（價格）

回答

相關問題