修改的對象無法在鼠標單擊功能，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