javascript - D3JS 附加文本和鼠标行为不会出现

Question

问题摘要:矩形显示正常，但文本标签根本不显示，并且鼠标行为(只是淡入不同颜色)根本不起作用。我对 D3JS 还很陌生，所以这可能是一个“菜鸟”问题，但我只是无法找出问题 - 尽管我猜测它与我用来附加的内容有关。

这是我的代码:

        var w = 1000;
        var h = 1000;

        var svgBody = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h);

        var contributors = [{name: "a", iy: 30}, 
            {name: "b", iy: 60},
            {name: "c", iy: 90},
            {name: "d", iy: 120}];


        var r = svgBody.selectAll(".rect").data(contributors)
            .enter()
            .append("g")
                .attr("class", "rect");

       r.append("rect")
            .attr("width", 90)
            .attr("height", 20)
            .style("fill", "#db8215")
            .attr("stroke", "black")
            .attr("x", 400)
            .attr("y", function(d){return d.iy});


        //Mouse behaviors
        //Mouseover - it turns slightly lighter
        r.on("mouseover", function(d){
            d3.select(this).select("rect").transition()
                .duration(500)
                .attr("color", "#e06d08");              
        });

        r.on("mouseout", function(d){
            d3.select(this).select("rect").transition()
                .duration(500)
                .attr("color", "#ffa354");
        });

        r.append("text")
            .attr("text-anchor", "middle")
            .attr("x", 400)
            .attr("y", function(d){return d.iy})
            .style("font-size", "30px")
            .style('fill', 'white')
            .style('font-family', 'Helvetica')
            .text(function(d){return d.name});

有几个帖子提出了相同的问题，但涉及不同的问题。我的代码不会将文本直接附加到所需的形状，例如 this或this或this ，并且控制台调试器中没有弹出任何错误。

非常感谢所有帮助!预先感谢您!

编辑:抱歉，看起来我采用了早期版本的代码。我尝试附加到“g”元素(在看到其他帖子之后)和“rect”元素(之前)。

更新:事实证明，选择(可能与不正确的附加一起)做到了，正如已接受的答案中所述。非常感谢!

Answer 1

r.on("mouseover", function(d){
            d3.select(this).select("rect").transition()
                .duration(500)
                .attr("color", "#e06d08");              
        });

除了 d3.select(this) 选择矩形之外，选择是正确的，因此之后不需要 .select("rect") 。您必须使用 .style("fill", "...")，而不是使用 .attr("color", "...")。 “鼠标悬停”也是如此。下面的工作片段。

编辑:标签未显示的原因是因为您将它们附加到矩形。相反，它们应该与 rect 一起位于 g 元素中。更新了代码片段。

var w = 1000;
        var h = 1000;

        var svgBody = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h);

        var contributors = [{name: "a", iy: 30}, 
            {name: "b", iy: 60},
            {name: "c", iy: 90},
            {name: "d", iy: 120}];


        var r = svgBody.selectAll(".rect").data(contributors)
            .enter()
            .append("g")
                .attr("class", "rect");
            r.append("rect")
                .attr("width", 90)
                .attr("height", 20)
                .style("fill", "#db8215")
                .attr("stroke", "black")
                .attr("x", 400)
                .attr("y", function(d){return d.iy});


        //Mouse behaviors
        //Mouseover - it turns slightly lighter
        r.on("mouseover", function(d){
            d3.select(this).select('rect').transition()
                .duration(500)
                .style("fill", "#e06d08");              
        });

        r.on("mouseout", function(d){
            d3.select(this).select('rect').transition()
                .duration(500)
                .style("fill", "#ffa354");
        });

        r.append("text")
        		.attr('class', 'text')
            .attr("text-anchor", "middle")
            .attr("x", 400)
            .attr("y", function(d){return d.iy})
            .style("font-size", "30px")
            .style('fill', 'white')
            .style('font-family', 'Helvetica')
            .text(function(d){
            	return d.name
             });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>