Question

很抱歉提出一个微不足道的问题。我试图从json文件中绘制一些矩形（树图）并在每个矩形的中心覆盖一个圆。我也试图标记矩形。控制台显示正确的值，但是，文本不可见＆amp;圆圈不在每个矩形的中心。这是一个非常简单的任务，我是d3的新手。你能帮我纠正我的错误吗？ enter image description here

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Treemap </title>
<script type="text/javascript" src="../d3/d3.v3.js"></script>
</head>


<body>

<script>

    var jsondata = [
        {
            "name" : "Middle East",
            "size" : 861482,
            "x" : 18,
            "y" : 18,
            "width" : 415.57094333304099,
            "height" : 484
        },
        {
            "name" : "Australasia",
            "size" : 80696,
            "x" : 433.57094333304099,
            "y" : 226.66857473176645,
            "width" : 68.429056666959013,
            "height" : 275.33142526823355
        },
        {
            "name" : "Europe",
            "size" : 61158,
            "x" : 433.57094333304099,
            "y" : 18,
            "width" : 68.429056666959013,
            "height" : 208.66857473176645
        }
        ];


    var svgContainer = d3.select("body").append("svg")
            .attr("width", 1000)
            .attr("height", 1000);
    //var svgContainer = svg.append("g").attr("transform", "translate(0, 0)");

    var rectangles = svgContainer.selectAll("rect")
            .data(jsondata)
            .enter()
            .append("rect");

    var rect = rectangles.attr("x", function (d) { return d.x; })
            .attr("y", function (d) { return d.y; })
            .attr("width", function (d) { return d.width; })
            .attr("height", function (d) { return d.height; })
            .style("fill", "green")
            .style("stroke", "white")
            .style("stroke-width", "0.5")
            .style("z-index", "1");

    rect.append("text")
            .attr("x", function(d) { return d.x + 2; })
            .attr("y", function(d) { return d.y + 2; })
            .attr("dy", ".35em")
            .text(function(d) { return d.name; })
            .style("font-family", "Verdana")
            .style("font-size", "18")
            .style("fill", "black")
            .style("z-index", "2");



    var dots = svgContainer.selectAll("circle")
            .data(jsondata)
            .enter()
            .append("circle");

    var dot = dots.attr("cx", function (d) { return (d.x + d.width) / 2 ; })
            .attr("cy", function (d) { return (d.y + d.height) / 2 ; })
            .attr("r", "5")
            .style("fill", "white");
            //.style("z-index", "3");



</script>

</body>
</html>

Answer 1

您必须在svgContainer中附加文本，如下面的代码所示。用于查找矩形中心的计算是错误的。试试这个。

var rectangles = svgContainer.selectAll("g")
        .data(jsondata)
        .enter()
        .append("g");

var rect = rectangles.append("rect").attr("x", function (d) { return d.x; })
        .attr("y", function (d) { return d.y; })
        .attr("width", function (d) { return d.width; })
        .attr("height", function (d) { return d.height; })
        .style("fill", "green")
        .style("stroke", "white")
        .style("stroke-width", "0.5")
        .style("z-index", "1");

rectangles     
        .append("text")
        .attr("x", function(d) { return d.x + 2; })
        .attr("y", function(d) { return d.y + 15; })
        .attr("dy", ".35em")
        .text(function(d) { return d.name; })
        .style("font-family", "Verdana")
        .style("font-size", "18")
        .style("fill", "black")
        .style("z-index", "2");


var dots = rectangles.append("circle").attr("cx", function (d) { return d.x+(d.width/2) ; })
        .attr("cy", function (d) { return d.y+(d.height/2) ; })
        .attr("r", "5")
        .style("fill", "white");

以下是JSFiddle

Answer 2

你需要两件事才能使它发挥作用：

您无法在text中添加rect元素，因此您需要将text个节点附加到svgContainer并为此工作，你需要像对待圈子那样进行.selectAll('text').data(jsondata).enter().append('text')。
矩形的中心是矩形的位置加上宽度/高度的一半，你正在做位置加上宽度/高度，所有它除以2，所以你的父母是错的的地方。

希望这有帮助。

的Jaime

Answer 3

我replied on the D3 mailing list，虽然Jaime在这两方面都是正确的。

d3在矩形的中心圆圈

3 个答案: