修改的对象未正确索引鼠标点击功能，JavaScript

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

我浏览了这个不错的教程(https://bost.ocks.org/mike/bar/2/(，将其更新以与D3.v5一起使用，使bars在鼠标上更改颜色，现在我想去在您单击bar 时，将栏中的文本从人的名字(d.name(更改为人的价值(d.value(，而不是文本(单击文本时使其工作起来(。d.name和d.Value在TSV文件中。

我已经附加了我的代码。当您单击任何 bar时，顶部栏会按照我想要的方式切换而不是单击栏时。似乎鼠标功能没有索引值。我不知道。仍在试图把我的头缠绕在这个问题上。这与我的代码思维非常不同。

谢谢。P.S.如果您知道有任何好的阅读资源可以提供帮助，我也很感激。

<!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>

做...

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; });
};

这具有不依赖矩形和文本之间关系的优势。但是，文本也将启动该功能。

相关内容

最新更新

热门标签：