d3 v4棒グラフのツールチップのデータを取得

Question

テキストを定義することでツールチップを取得できますが、私の人生にとってツールチップを使ってデータファイルからテキストを印刷することはできません。私はd.valueを定義するのが面倒だとは思っていますが、私にはわからないv4のものがあるのだろうかと思っています。私は場所のすべてのvarステートメントを移動しようとしましたが、何も役立つようです。通常、「未定義のプロパティを読み取れません」というエラーに終わります。私が間違ってやっていることに関する考えは？ありがとう。

var tooltip = d3.select("body") 
.append("div") 
.style("position", "absolute") 
.style("z-index", "10") 
.style("visibility", "hidden") 
.text("This works just fine"); 
/* .text(function(d) { return d.value; }); */ 

d3.tsv("15.tsv", type, function(error, data) { 
    if (error) throw error; 

    x.domain([0, d3.max(data, function(d) { return d.value; })]); 

    y.domain(data.map(function(d) { return (d.gamedate); })) 
    .paddingInner(0.1) 
    .paddingOuter(0.5); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .append("text") 
     .attr("class", "label") 
     .attr("transform", "translate(" + width + ",0)") 
     .attr("y", 15) 
     .style("text-anchor", "end") 
     .text("Game Score"); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    svg.selectAll(".bar") 
     .data(data) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", 0) 
     .attr("height", y.bandwidth()) 
     .attr("y", function(d) { return y(d.gamedate); }) 
     .attr("width", function(d) { return x(d.value); }) 
     .on("mouseover", function(d){ 
     return tooltip.style("visibility", "visible");}) 
     .on("mousemove", function(d){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+400)+"px");}) 
     .on("mouseout", function(d){return tooltip.style("visibility", "hidden");}) 

Answer 1

私は、主な問題は、event変数はmousemove関数のスコープで定義されていないということだと思います。あなたは次のようにして、マウスの値を取得することができます。

.on("mousemove", function(d) { 
    const [xMouse, yMouse] = d3.mouse(this); 
    tooltip.style("top", (yMouse) + "px") 
     .style("left", (xMouse) + "px") 
     .text(`Gamedate ${d.gamedate} with value ${d.value}`) 
}) 

私はそれが動作するようになった方法を示すためにJSbinをした、データが嘲笑されます。