Question

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

我浏览了这个很好的教程（https://bost.ocks.org/mike/bar/2/），更新了它以使用d3.v5，使鼠标悬停时条形变色，现在我想更改条形图中的文字＆＃39 ;当您单击栏时，该名称（d.name）指向该人的值（d.value），而不是文本（单击文本时其工作正常）。 d.name和d.value在tsv文件中。

我已附上我的代码。我的方式，当你点击任何栏时，顶栏会切换我喜欢的方式，而不是单击栏。似乎鼠标功能不是对值进行索引。我不确定。仍然试图绕过这个。代码思维与我以前完全不同。

谢谢。附：如果你知道有任何好的阅读资源可以提供帮助，我也会很感激。

<!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 个答案: