Question

问题摘要：矩形显示正常，但文本标签根本不显示，鼠标行为（只是淡入不同颜色）根本不起作用。我仍然是D3JS的新手所以它可能是一个“noob”问题，但我不能解决这个问题 - 尽管我猜它与我用来追加的东西有关。

这是我的代码：

        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”）。而不是使用.attr（“color”，“...”），你必须使用.style（“fill”，“...”）。 “mouseout”也是如此。下面的工作片段。

编辑：标签未显示的原因是因为您要将它们附加到rect。相反，它们应该与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>

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

1 个答案: