2017-07-28 16 views
1

私はd3.jsを使用して描かれた折れ線グラフを持っており、ツールチップも付属しています。d3.js - マウス移動に追加された円は表示されません

私が今したいのは、マウスポイントに円を描いて、ユーザーがどこを指しているかを見たいということです。

http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a

私のコードは以下のとおりです。

var data = [{ "date": "2016.07.28", "close": 415769.71 }, { "date": "2016.07.29", "close": 416637.03 }, { "date": "2016.08.01", "close": 415480.63 }, { "date": "2016.08.02", "close": 415918.27 }, { "date": "2016.08.03", "close": 414875.67 }, { "date": "2016.08.05", "close": 412890.65 }, { "date": "2016.08.11", "close": 416473.9 }, { "date": "2016.08.12", "close": 433288.09 }, { "date": "2016.08.13", "close": 442856.08 }, { "date": "2016.08.14", "close": 442856.08 }, { "date": "2016.08.15", "close": 444137.07 }, { "date": "2016.08.16", "close": 433754.46 }, { "date": "2016.08.17", "close": 439125.73 }, { "date": "2016.08.18", "close": 440386.45 }, { "date": "2016.08.19", "close": 448725.0 }, { "date": "2016.08.20", "close": 448725.0 }, { "date": "2016.08.21", "close": 448725.0 }, { "date": "2016.08.22", "close": 448264.42 }, { "date": "2016.08.23", "close": 449988.5 }, { "date": "2016.08.24", "close": 451432.11 }, { "date": "2016.08.25", "close": 448458.9 }, { "date": "2016.08.26", "close": 449256.26 }, { "date": "2016.08.27", "close": 449256.26 }, { "date": "2016.08.28", "close": 449256.26 }, { "date": "2016.08.29", "close": 443269.71 }, { "date": "2016.08.30", "close": 442405.48 }, { "date": "2016.08.31", "close": 441033.19 }, { "date": "2016.09.01", "close": 446678.46 }, { "date": "2016.09.02", "close": 438455.25 }, { "date": "2016.09.03", "close": 438455.25 }, { "date": "2016.09.04", "close": 438455.25 }, { "date": "2016.09.05", "close": 442283.68 }, { "date": "2016.09.06", "close": 446083.91 }, { "date": "2016.09.07", "close": 449852.09 }, { "date": "2016.09.08", "close": 449602.36 }, { "date": "2016.09.09", "close": 447723.8 }, { "date": "2016.09.10", "close": 447723.8 }, { "date": "2016.09.11", "close": 447723.8 }, { "date": "2016.09.12", "close": 440403.6 }, { "date": "2016.09.13", "close": 444724.8 }, { "date": "2016.09.14", "close": 445707.67 }, { "date": "2016.09.15", "close": 443773.76 }, { "date": "2016.09.16", "close": 445232.75 }, { "date": "2016.09.17", "close": 445232.75 }, { "date": "2016.09.18", "close": 445232.75 }, { "date": "2016.09.19", "close": 446828.48 }, { "date": "2016.09.20", "close": 444720.89 }, { "date": "2016.09.21", "close": 443240.19 }, { "date": "2016.09.22", "close": 445995.63 }, { "date": "2016.09.23", "close": 447672.05 }, { "date": "2016.09.24", "close": 447672.05 }, { "date": "2016.09.25", "close": 447672.05 }, { "date": "2016.09.26", "close": 447488.49 }, { "date": "2016.09.27", "close": 446673.42 }, { "date": "2016.09.28", "close": 446540.79 }, { "date": "2016.09.29", "close": 447268.36 }, { "date": "2016.09.30", "close": 449770.37 }, { "date": "2016.10.01", "close": 449770.37 }, { "date": "2016.10.02", "close": 449770.37 }, { "date": "2016.10.03", "close": 451587.8 }, { "date": "2016.10.04", "close": 451349.71 }, { "date": "2016.10.05", "close": 448795.77 }, { "date": "2016.10.06", "close": 449260.0 }, { "date": "2016.10.07", "close": 449161.02 }, { "date": "2016.10.08", "close": 449161.02 }, { "date": "2016.10.09", "close": 449161.02 }, { "date": "2016.10.10", "close": 443375.3 }, { "date": "2016.10.11", "close": 442792.94 }, { "date": "2016.10.12", "close": 438761.72 }, { "date": "2016.10.13", "close": 437497.76 }, { "date": "2016.10.14", "close": 440934.74 }, { "date": "2016.10.15", "close": 440934.74 }, { "date": "2016.10.16", "close": 440934.74 }, { "date": "2016.10.17", "close": 438264.66 }, { "date": "2016.10.18", "close": 437858.2 }, { "date": "2016.10.19", "close": 441397.62 }, { "date": "2016.10.20", "close": 443170.87 }, { "date": "2016.10.21", "close": 443646.28 }, { "date": "2016.10.22", "close": 443646.28 }, { "date": "2016.10.23", "close": 443646.28 }, { "date": "2016.10.24", "close": 440991.71 }, { "date": "2016.10.25", "close": 443931.36 }, { "date": "2016.10.26", "close": 438145.53 }, { "date": "2016.10.27", "close": 435437.87 }, { "date": "2016.10.28", "close": 436422.58 }, { "date": "2016.10.29", "close": 436422.58 }, { "date": "2016.10.30", "close": 436422.58 }, { "date": "2016.10.31", "close": 436631.88 }, { "date": "2016.11.01", "close": 436644.2 }, { "date": "2016.11.02", "close": 431511.98 }, { "date": "2016.11.03", "close": 427601.98 }, { "date": "2016.11.04", "close": 421989.29 }, { "date": "2016.11.05", "close": 421989.29 }, { "date": "2016.11.06", "close": 421989.29 }, { "date": "2016.11.07", "close": 427247.62 }, { "date": "2016.11.08", "close": 431661.13 }, { "date": "2016.11.09", "close": 421353.91 }, { "date": "2016.11.10", "close": 432784.98 }, { "date": "2016.11.11", "close": 432819.97 }, { "date": "2016.11.12", "close": 432819.97 }, { "date": "2016.11.13", "close": 432819.97 }, { "date": "2016.11.14", "close": 433040.63 }, { "date": "2016.11.15", "close": 429224.61 }, { "date": "2016.11.16", "close": 429751.43 }, { "date": "2016.11.17", "close": 432266.27 }, { "date": "2016.11.18", "close": 431542.63 }, { "date": "2016.11.19", "close": 431542.63 }, { "date": "2016.11.20", "close": 431542.63 }, { "date": "2016.11.21", "close": 432627.92 }, { "date": "2016.11.22", "close": 435207.46 }, { "date": "2016.11.23", "close": 437568.4 }, { "date": "2016.11.24", "close": 438192.06 }, { "date": "2016.11.25", "close": 439907.14 }, { "date": "2016.11.26", "close": 439907.14 }, { "date": "2016.11.27", "close": 439907.14 }, { "date": "2016.11.28", "close": 438068.46 }, { "date": "2016.11.29", "close": 437630.15 }, { "date": "2016.11.30", "close": 436102.02 }, { "date": "2016.12.01", "close": 440631.87 }, { "date": "2016.12.02", "close": 433277.47 }, { "date": "2016.12.03", "close": 433277.47 }, { "date": "2016.12.04", "close": 433277.47 }, { "date": "2016.12.05", "close": 426928.55 }, { "date": "2016.12.06", "close": 429250.58 }, { "date": "2016.12.07", "close": 432613.3 }, { "date": "2016.12.08", "close": 435991.37 }, { "date": "2016.12.09", "close": 435809.86 }, { "date": "2016.12.10", "close": 435809.86 }, { "date": "2016.12.11", "close": 435809.86 }, { "date": "2016.12.12", "close": 437401.4 }, { "date": "2016.12.13", "close": 437678.67 }, { "date": "2016.12.14", "close": 437779.6 }, { "date": "2016.12.15", "close": 435160.93 }, { "date": "2016.12.16", "close": 435936.14 }, { "date": "2016.12.17", "close": 435936.14 }, { "date": "2016.12.18", "close": 435936.14 }, { "date": "2016.12.19", "close": 435783.11 }, { "date": "2016.12.20", "close": 437419.43 }, { "date": "2016.12.21", "close": 435864.01 }, { "date": "2016.12.22", "close": 436944.15 }, { "date": "2016.12.23", "close": 438698.31 }, { "date": "2016.12.24", "close": 438698.31 }, { "date": "2016.12.25", "close": 438698.31 }, { "date": "2016.12.26", "close": 438698.31 }, { "date": "2016.12.27", "close": 438702.03 }, { "date": "2016.12.28", "close": 440278.73 }, { "date": "2016.12.29", "close": 440129.1 }, { "date": "2016.12.30", "close": 450060.1 }, { "date": "2016.12.31", "close": 450060.1 }, { "date": "2017.01.01", "close": 450060.1 }, { "date": "2017.01.02", "close": 450060.1 }, { "date": "2017.01.03", "close": 454954.08 }, { "date": "2017.01.04", "close": 454813.4 }, { "date": "2017.01.05", "close": 452788.93 }, { "date": "2017.01.06", "close": 465621.12 }, { "date": "2017.01.07", "close": 465621.12 }, { "date": "2017.01.08", "close": 465621.12 }, { "date": "2017.01.09", "close": 449900.19 }, { "date": "2017.01.10", "close": 453449.83 }, { "date": "2017.01.11", "close": 453581.97 }, { "date": "2017.01.12", "close": 453123.11 }, { "date": "2017.01.13", "close": 449822.17 }, { "date": "2017.01.14", "close": 449822.17 }, { "date": "2017.01.15", "close": 449822.17 }, { "date": "2017.01.16", "close": 451032.39 }, { "date": "2017.01.17", "close": 448590.04 }, { "date": "2017.01.18", "close": 447396.99 }, { "date": "2017.01.19", "close": 446637.79 }, { "date": "2017.01.20", "close": 445731.93 }, { "date": "2017.01.21", "close": 445731.93 }, { "date": "2017.01.22", "close": 445731.93 }, { "date": "2017.01.23", "close": 441257.15 }, { "date": "2017.01.24", "close": 444268.24 }, { "date": "2017.01.25", "close": 448173.94 }, { "date": "2017.01.26", "close": 448226.34 }, { "date": "2017.01.27", "close": 451146.69 }, { "date": "2017.01.28", "close": 451146.69 }, { "date": "2017.01.29", "close": 451146.69 }, { "date": "2017.01.30", "close": 445489.55 }, { "date": "2017.01.31", "close": 453378.23 }, { "date": "2017.02.01", "close": 445467.81 }, { "date": "2017.02.02", "close": 452240.28 }, { "date": "2017.02.03", "close": 448047.41 }, { "date": "2017.02.04", "close": 448047.41 }, { "date": "2017.02.05", "close": 448047.41 }, { "date": "2017.02.06", "close": 447734.82 }, { "date": "2017.02.07", "close": 447734.43 }, { "date": "2017.02.08", "close": 447734.43 }, { "date": "2017.02.09", "close": 448910.24 }, { "date": "2017.02.10", "close": 458430.33 }, { "date": "2017.02.11", "close": 460222.18 }, { "date": "2017.02.12", "close": 460285.27 }, { "date": "2017.02.13", "close": 460269.24 }, { "date": "2017.02.14", "close": 462550.72 }, { "date": "2017.02.15", "close": 461999.77 }, { "date": "2017.02.16", "close": 463765.05 }, { "date": "2017.02.17", "close": 461784.74 }, { "date": "2017.02.18", "close": 462009.58 }, { "date": "2017.02.19", "close": 462021.18 }, { "date": "2017.02.20", "close": 462021.18 }, { "date": "2017.02.21", "close": 459652.14 }, { "date": "2017.02.22", "close": 459844.38 }, { "date": "2017.02.23", "close": 460839.94 }, { "date": "2017.02.24", "close": 459590.39 }, { "date": "2017.02.25", "close": 456286.22 }, { "date": "2017.02.26", "close": 456264.32 }, { "date": "2017.02.27", "close": 456264.32 }, { "date": "2017.02.28", "close": 456726.79 }, { "date": "2017.03.01", "close": 457195.34 }, { "date": "2017.03.02", "close": 456486.98 }, { "date": "2017.03.03", "close": 459288.15 }, { "date": "2017.03.04", "close": 458174.44 }, { "date": "2017.03.05", "close": 458264.61 }, { "date": "2017.03.06", "close": 458264.61 }, { "date": "2017.03.07", "close": 458263.87 }, { "date": "2017.03.08", "close": 459332.84 }, { "date": "2017.03.09", "close": 451149.89 }, { "date": "2017.03.10", "close": 449629.39 }, { "date": "2017.03.11", "close": 451275.09 }, { "date": "2017.03.12", "close": 451321.61 }, { "date": "2017.03.13", "close": 451321.61 }, { "date": "2017.03.14", "close": 450500.93 }, { "date": "2017.03.15", "close": 453276.68 }, { "date": "2017.03.16", "close": 454412.78 }, { "date": "2017.03.17", "close": 453584.12 }, { "date": "2017.03.18", "close": 456037.92 }, { "date": "2017.03.19", "close": 456037.92 }, { "date": "2017.03.20", "close": 456037.92 }, { "date": "2017.03.21", "close": 465214.96 }, { "date": "2017.03.22", "close": 467558.26 }, { "date": "2017.03.23", "close": 464001.12 }, { "date": "2017.03.24", "close": 464853.82 }, { "date": "2017.03.25", "close": 465211.4 }, { "date": "2017.03.26", "close": 465253.83 }, { "date": "2017.03.27", "close": 465253.83 }, { "date": "2017.03.28", "close": 466534.6 }, { "date": "2017.03.29", "close": 470332.58 }, { "date": "2017.03.30", "close": 471479.45 }, { "date": "2017.03.31", "close": 472366.1 }, { "date": "2017.04.01", "close": 471164.06 }, { "date": "2017.04.02", "close": 471183.93 }, { "date": "2017.04.03", "close": 471199.49 }, { "date": "2017.04.04", "close": 471722.59 }, { "date": "2017.04.05", "close": 472014.02 }, { "date": "2017.04.06", "close": 474024.44 }, { "date": "2017.04.07", "close": 472449.23 }, { "date": "2017.04.08", "close": 472449.23 }, { "date": "2017.04.09", "close": 472840.91 }, { "date": "2017.04.10", "close": 473877.47 }, { "date": "2017.04.11", "close": 474102.38 }, { "date": "2017.04.12", "close": 474164.73 }, { "date": "2017.04.13", "close": 473933.62 }, { "date": "2017.04.14", "close": 470190.36 }, { "date": "2017.04.15", "close": 470096.53 }, { "date": "2017.04.16", "close": 470096.53 }, { "date": "2017.04.17", "close": 457205.73 }, { "date": "2017.04.18", "close": 457205.73 }, { "date": "2017.04.19", "close": 464097.03 }, { "date": "2017.04.20", "close": 453321.84 }, { "date": "2017.04.21", "close": 454375.6 }, { "date": "2017.04.22", "close": 455703.74 }, { "date": "2017.04.23", "close": 455703.74 }, { "date": "2017.04.24", "close": 455588.08 }, { "date": "2017.04.25", "close": 458333.05 }, { "date": "2017.04.26", "close": 458333.05 }, { "date": "2017.04.27", "close": 459316.67 }, { "date": "2017.04.28", "close": 459774.74 }, { "date": "2017.04.29", "close": 457559.7 }, { "date": "2017.04.30", "close": 457559.7 }, { "date": "2017.05.01", "close": 457559.7 }, { "date": "2017.05.02", "close": 460123.6 }, { "date": "2017.05.03", "close": 461791.11 }, { "date": "2017.05.04", "close": 460124.68 }, { "date": "2017.05.05", "close": 461199.33 }, { "date": "2017.05.06", "close": 460071.61 }, { "date": "2017.05.07", "close": 460071.61 }, { "date": "2017.05.08", "close": 460071.61 }, { "date": "2017.05.09", "close": 469420.51 }, { "date": "2017.05.10", "close": 471259.68 }, { "date": "2017.05.11", "close": 472676.09 }, { "date": "2017.05.12", "close": 475545.19 }, { "date": "2017.05.13", "close": 470968.54 }, { "date": "2017.05.14", "close": 470968.54 }, { "date": "2017.05.15", "close": 470968.54 }, { "date": "2017.05.16", "close": 470176.34 }, { "date": "2017.05.17", "close": 471211.09 }, { "date": "2017.05.18", "close": 470685.93 }, { "date": "2017.05.19", "close": 467181.32 }, { "date": "2017.05.20", "close": 466256.07 }, { "date": "2017.05.21", "close": 466256.07 }, { "date": "2017.05.22", "close": 466256.07 }, { "date": "2017.05.23", "close": 469182.04 }, { "date": "2017.05.24", "close": 469416.81 }, { "date": "2017.05.25", "close": 470050.96 }, { "date": "2017.05.26", "close": 470963.95 }, { "date": "2017.05.27", "close": 469765.42 }, { "date": "2017.05.28", "close": 469765.42 }, { "date": "2017.05.29", "close": 469765.42 }, { "date": "2017.05.30", "close": 456158.73 }, { "date": "2017.05.31", "close": 453925.71 }, { "date": "2017.06.01", "close": 452869.32 }, { "date": "2017.06.02", "close": 451961.91 }, { "date": "2017.06.03", "close": 456218.19 }, { "date": "2017.06.04", "close": 456218.19 }, { "date": "2017.06.05", "close": 456218.19 }, { "date": "2017.06.06", "close": 455328.06 }, { "date": "2017.06.07", "close": 452119.93 }, { "date": "2017.06.08", "close": 473995.55 }, { "date": "2017.06.09", "close": 465928.73 }, { "date": "2017.06.10", "close": 465526.5 }, { "date": "2017.06.11", "close": 465526.5 }, { "date": "2017.06.12", "close": 465526.5 }, { "date": "2017.06.13", "close": 465405.5 }, { "date": "2017.06.14", "close": 466576.89 }, { "date": "2017.06.15", "close": 471292.3 }, { "date": "2017.06.16", "close": 467890.51 }, { "date": "2017.06.17", "close": 467933.34 }, { "date": "2017.06.18", "close": 467933.34 }, { "date": "2017.06.19", "close": 467933.34 }, { "date": "2017.06.20", "close": 469273.27 }, { "date": "2017.06.21", "close": 469860.36 }, { "date": "2017.06.22", "close": 463878.51 }, { "date": "2017.06.23", "close": 466932.33 }, { "date": "2017.06.24", "close": 473652.4 }, { "date": "2017.06.25", "close": 473652.4 }, { "date": "2017.06.26", "close": 473652.4 }, { "date": "2017.06.27", "close": 486152.4 }, { "date": "2017.06.28", "close": 486152.4 }, { "date": "2017.06.29", "close": 487634.11 }, { "date": "2017.06.30", "close": 504268.35 }, { "date": "2017.07.01", "close": 498911.34 }, { "date": "2017.07.02", "close": 498911.34 }]; 
margin = { 
    top: 20, 
    right: 60, 
    bottom: 20, 
    left: 100 
}; 
var width = 1000, 
      height = 500; 

var vis = d3.select("#line_chart").append("svg") 
        .attr("width", width + margin.left + margin.right) 
        .attr("height", height + margin.top + margin.bottom); 

var parseTime = d3.time.format("%Y.%m.%d").parse; 

max_y = 0; 
min_y = data[0].close; 
var extent = d3.extent(data.map(function (d) { return d.date })); 

max_x = extent[1]; 
min = extent[0]; 

for (i = 0; i < data.length; i++) { 
    max_y = Math.max(max_y, data[i].close); 
    min_y = Math.min(min_y, data[i].close); 
} 

var x = d3.time.scale() 
.rangeRound([margin.left, width]); 


xScale = x.domain(d3.extent(data, function (d) { 
    return parseTime(d.date); 
})); 

yScale = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([0, max_y]), 

xAxis = d3.svg.axis() 
      .scale(xScale), 





yAxis = d3.svg.axis() 
      .scale(yScale) 
      .orient("left") 
      .innerTickSize(-width) 
      .outerTickSize(0) 
      .tickPadding(10); 


vis.append("svg:g") 
    .attr("class", "x axis") 
    .style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px' }) 
    .attr("transform", "translate(0," + (height - margin.bottom) + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .attr("transform", "translate(-10,0) rotate(-40)") 
    .style("text-anchor", "end"); 




vis.append("text") 
    .attr("class", "x label") 
    .attr("text-anchor", "end") 
    .attr("x", width + 120) 
    .attr("y", height - 10) 
    .attr("font-weight", "bold") 
    .text("Selected Duration"); 

vis.append("svg:g") 
    .attr("class", "y axis") 
    .style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px' }) 
    .attr("transform", "translate(" + (margin.left) + ",0)") 
    .call(yAxis); 

vis.append("text") 
    .attr("class", "y label") 
    .attr("text-anchor", "end") 
    .attr("x", margin.left + 5) 
    .attr("y", margin.top - 2) 
    .attr("font-weight", "bold") 
    .text("Portfolio Value ($)"); 


var line = d3.svg.line() 
    .x(function (d) { 
     return xScale(parseTime(d.date)); 
    }) 
    .y(function (d) { 
     return yScale(d.close); 
    }) 
    .interpolate("basis"); 

vis.append('svg:path') 
    .datum(data) 
    .attr("fill", "none") 
    .attr("stroke", "steelblue") 
    .attr("stroke-linejoin", "round") 
    .attr("stroke-linecap", "round") 
    .attr("stroke-width", 1.5) 
    .attr("d", line); 

var hoverLineGroup = vis.append("g") 
         .attr("class", "hover-line"); 




var hoverLine = hoverLineGroup.append("line") 
           .attr("stroke", "#000080") 
           .attr("stroke-width", "3px") 
           .attr("x1", 10).attr("x2", 10) 
           .attr("y1", 0).attr("y2", height); 

var hoverTT = hoverLineGroup.append('text') 
          .attr("class", "hover-tex capo") 
          .attr('dy', "0.35em"); 


var hoverTT2 = hoverLineGroup.append('text') 
          .attr("class", "hover-text capo") 
          .attr('dy', "0.55em"); 

hoverLineGroup.style("opacity", 1e-6); 




vis.on("mouseout", hoverMouseOff) 
    .on("mousemove", hoverMouseOn); 

var bisectDate = d3.bisector(function (d) { return parseTime(d.date); }).left; 

function hoverMouseOn() { 

    var mouse_x = d3.mouse(this)[0]; 
    var mouse_y = d3.mouse(this)[1]; 
    var graph_y = yScale.invert(mouse_y); 
    var graph_x = xScale.invert(mouse_x); 

    var mouseDate = xScale.invert(mouse_x); 
    var i = bisectDate(data, mouseDate); 

    var d0 = data[i - 1] 
    var d1 = data[i]; 

    var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0; 

    hoverTT.text("Date: " + d.date); 
    hoverTT.attr('x', mouse_x); 
    hoverTT.attr('y', yScale(d.close)); 

    hoverTT2.text("Portfolio Value: " + Math.round(d.close * 100)/100) 
      .attr('x', mouse_x) 
      .attr('y', yScale(d.close) + 10); 







    hoverLine.attr("x1", mouse_x).attr("x2", mouse_x) 
    hoverLineGroup.style({ 'font-weight': 'bold', 'opacity': 1 }); 

    hoverLine.append("circle") 
      .attr("class", "y") 
      .style("fill", "none") 
      .style("stroke", "blue") 
      .attr("r", 40) 
      .attr('x', mouse_x) 
      .attr('y', yScale(d.close) + 20); 

} 

function hoverMouseOff() { 
    hoverLineGroup.style("opacity", 1e-6); 
} 
</script> 

あなたが表示された場合、私はhoverLineに円を追加しているが、それでも円が表示されません。

問題が何であるかを誰かに教えてもらえますか?

答えて

2

<line>要素に要素を追加することはできません。それは単に機能しません。その代わりに

、ラインの同じ容器に円を追加します。そのほかに

var hoverCircle = hoverLineGroup.append("circle") 

、SVGの円はcxcyによって設定されたそれらの位置ではなく、xyを有します。

ここに更新されたフィドルです:https://jsfiddle.net/gerardofurtado/qwcpem2t/

関連する問題