修改的对象无法在鼠标单击功能，JavaScript上正确索引

Question

I'm just learning javascript and I'm not sure how to finish this little challenge I've given myself. 我只是在学习javascript，我不确定如何完成我给自己的这个小挑战。 I'm looking for some help. 我正在寻找帮助。

I went through this nice tutorial ( https://bost.ocks.org/mike/bar/2/ ), updated it to work with d3.v5, made the bars change color on mouseover, and now I want to change the text in the bars from the person's name (d.name) to the person's value (d.value) when you click the bar , not the text (got it working when you click the text). 我浏览了这个不错的教程（ https://bost.ocks.org/mike/bar/2/ ），对其进行了更新以与d3.v5一起使用，使条形图在鼠标悬停时会更改颜色，现在我想更改文本单击条形图中从人名（d.name）到人的值（d.value） 的条形 ，而不是文本（单击文本时它可以工作）。 d.name and d.value are in a tsv file. d.name和d.value在tsv文件中。

I've attached my code. 我已经附上了我的代码。 The way I have it, when you click any bar the top bar switches the way I'd like instead of the bar clicked. 按我的方式，当您单击任何栏时，顶部栏会切换我想要的方式，而不是单击的栏。 It seems like the mousefunction isn't indexing the values. 似乎mousefunction没有索引值。 I'm not sure. 我不确定。 Still trying to wrap my head around this. 仍在努力解决这个问题。 It's very different code thinking than I'm used to. 与我以前的代码思维方式大不相同。

Thank you. 谢谢。 ps if you know of any good reading resources to help, I would appreciate that too. ps：如果您知道有什么好的阅读资源对您有所帮助，我也将不胜感激。

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

<style>
    .chart rect {
        fill: red;
    }

    .chart text {
        fill: green;
        font: 12px sans-serif;
        text-anchor: end;
    }

</style>

<svg class = "chart"></svg>
<script src="https://d3js.org/d3.v5.js" charset="utf-8"></script>

<script>
    var width = 420,
    barHeight = 20;

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

    var chart = d3.select(".chart") 
        .attr("width", width); 

    d3.tsv("data.tsv").then(function(data) { 

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

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

        chart.attr("height", barHeight * data.length);

        var bar = chart.selectAll("g")
            .data(data) 
          .enter().append("g") 
            .attr("transform", function(d, i) {return "translate(0," + i * barHeight + ")";}); 

        bar.append("rect") 
            .attr("width", function(d) {return x(d.value); }) 
            .attr("height", barHeight - 1) 
            .on("mouseover", function () {d3.select(this).style("fill", "blue");})
            .on("mouseout", function () {d3.select(this).style("fill", "red");})
            .on("click", mousefunction);

        bar.append("text") 
            .attr("x", function(d) {return x(d.value) - 3; }) 
            .attr("y", barHeight / 2) 
            .attr("dy", ".35em") 
            .text(function(d) { return d.name; });

        function mousefunction() {
            d3.select("text")
                .text(function(d) { return d.value; });
        };

    }); 

</script>

Answer 1

When you do... 当你做...

function mousefunction() {
    d3.select("text")
        .text(function(d) { return d.value; });
};

... you're telling D3 to select the first text it finds, no matter where you clicked. ...告诉您D3选择找到的第一个文本，无论您在何处单击。

Instead of that, select the text which is the next sibling of the rectangle (of course, provided that you append the rectangles and the texts in the order described in your snippet): 取而代之的是，选择文本，它是矩形的下一个兄弟姐妹（当然，前提是您按片段中所述的顺序附加矩形和文本）：

function mousefunction() {
    d3.select(this.nextSibling)
        .text(function(d) { return d.value; });
};

If you're not sure about the elements' order you can attach the event to the groups, not to the rectangles, and then you do: 如果不确定元素的顺序，可以将事件附加到组，而不是矩形，然后执行以下操作：

function mousefunction() {
    d3.select(this).select("text")
        .text(function(d) { return d.value; });
};

This has the advantage of not depending on the relationship between rectangles and texts. 这具有不依赖于矩形和文本之间的关系的优点。 However, the texts will also fire the function. 但是，文本也会触发该功能。

修改的对象无法在鼠标单击功能，JavaScript上正确索引

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-03-30 01:21:08

修改的对象无法在鼠标单击功能，JavaScript上正确索引

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-03-30 01:21:08

解决方案1
0 已采纳 2018-03-30 01:21:08