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

Question

我只是在学习javascript，我不确定如何完成我给自己的这个小挑战。 我正在寻找帮助。

我浏览了这个不错的教程（ https://bost.ocks.org/mike/bar/2/ ），对其进行了更新以与d3.v5一起使用，使条形图在鼠标悬停时会更改颜色，现在我想更改文本单击条形图中从人名（d.name）到人的值（d.value） 的条形 ，而不是文本（单击文本时它可以工作）。 d.name和d.value在tsv文件中。

我已经附上了我的代码。 按我的方式，当您单击任何栏时，顶部栏会切换我想要的方式，而不是单击的栏。 似乎mousefunction没有索引值。 我不确定。 仍在努力解决这个问题。 与我以前的代码思维方式大不相同。

谢谢。 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

当你做...

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

...告诉您D3选择找到的第一个文本，无论您在何处单击。

取而代之的是，选择文本，它是矩形的下一个兄弟姐妹（当然，前提是您按片段中所述的顺序附加矩形和文本）：

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

如果不确定元素的顺序，可以将事件附加到组，而不是矩形，然后执行以下操作：

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

这具有不依赖于矩形和文本之间的关系的优点。 但是，文本也会触发该功能。

修改的对象无法在鼠标单击功能，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