在 SVG 中可视化多维数组

Question

我有一个绑定到 g 元素的对象数组。对于每个 g 元素，我生成一个矩形元素。它到目前为止有效，但现在我想在每个 g 元素中有一个 "parts" 的动态数字，它应该在现有 rect 中生成一个新的 rect 和文本元素。

在这里你可以找到我的例子或者在 fiddle.net/tnnomejg/

var config = {
    width: 600
};

var data = [
    {
        height: 150,
        y: 0,
        parts: [
            {
                title: "Hello",
                x: 50,
                y: 60,
            },
            {
                title: "World",
                x: 350,
                y: 60,
            }
        ],        
    },
    {
        height: 150,
        y: 155,
        parts: [
            {
                title: "Demo",
                x: 280,
                y: 215,
            }
        ],        
    },
];

var svg = d3.select("body").append("svg").attr("width", config.width).attr("height", 500);

var g = svg.selectAll("g")
                .data(data)
                .enter()
                .append("g");

    g.append("rect")
        .attr("x", 1)
        .attr("y", function(d) { return d.y; })
        .attr("width", config.width)
        .attr("height", function(d) { return d.height; });

谢谢。

Answer 1

使用 d3 选择器 each 方法。

g.each(function(d, i) {
    var rect = d3.select(this);
    d.parts.forEach(function(p) {
        rect.append("rect")
            .style("fill", "aliceblue")
            .attr("x", p.x)
            .attr("y", p.y)
            .attr("width", config.width / 3)
            .attr("height", d.height / 2);
        rect.append("text")
            .style("stroke", "brown")
            .attr("x", p.x)
            .attr("y", p.y)
            .text(p.title);
    });
});

var config = {
    width: 600
};

var data = [{
    height: 150,
    y: 0,
    parts: [{
        title: "Hello",
        x: 50,
        y: 60,
    }, {
        title: "World",
        x: 350,
        y: 60,
    }],
}, {
    height: 150,
    y: 155,
    parts: [{
        title: "Demo",
        x: 280,
        y: 215,
    }],
}, ];

var svg = d3.select("body").append("svg").attr("width", config.width).attr("height", 500);

var g = svg.selectAll("g")
    .data(data)
    .enter()
    .append("g");

g.append("rect")
    .attr("x", 1)
    .attr("y", function(d) {
        return d.y;
    })
    .attr("width", config.width)
    .attr("height", function(d) {
        return d.height;
    });

g.each(function(d, i) {
    var rect = d3.select(this);
    d.parts.forEach(function(p) {
        rect.append("rect")
            .style("fill", "aliceblue")
            .attr("x", p.x)
            .attr("y", p.y)
            .attr("width", config.width / 3)
            .attr("height", d.height / 2);
        rect.append("text")
            .style("stroke", "brown")
            .attr("x", p.x)
            .attr("y", p.y)
            .text(p.title);
    });
});

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

Answer 2

您可以使用 subselection 将零件的数据绑定到相应的元素，使用如下访问器函数：

var parts = g.selectAll("g.part")
                .data(function(d) { return d.parts; })
                .enter()
                .append("g")
                    .attr("class", "part");

有了这个子选择，您可以 insert/append 内容访问绑定到每个 group/part 的相应数据。

var config = {
    width: 600
};

var data = [
    {
        height: 150,
        y: 0,
        parts: [
            {
                title: "Hello",
                x: 50,
                y: 60
            },
            {
                title: "World",
                x: 350,
                y: 60
            }
        ]        
    },
    {
        height: 150,
        y: 155,
        parts: [
            {
                title: "Demo",
                x: 280,
                y: 215
            }
        ]        
    }
];

var svg = d3.select("body").append("svg").attr("width", config.width).attr("height", 500);

var g = svg.selectAll("g")
                .data(data)
                .enter()
                .append("g");

    g.append("rect")
        .attr("x", 1)
        .attr("y", function(d) { return d.y; })
        .attr("width", config.width)
        .attr("height", function(d) { return d.height; });
    
var parts = g.selectAll("g.part")
                .data(function(d) { return d.parts; })
                .enter()
                .append("g")
                    .attr("class", "part");

    parts.append("rect")
        .attr({
        "class": "part",
        "x": function(d) { return d.x; },
        "y": function(d) { return d.y; },
        "width": 200,
        "height":80
        });
    
    parts.append("text")
        .attr({
        "class": "part",
        "x": function(d) { return d.x; },
        "y": function(d) { return d.y; }
        })
        .text(function(d) { return d.title; });

g.part rect {
    fill:white;
}

g.part text {
    fill: red;
    stroke: none;
    font-size:20px;
}

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

在 SVG 中可视化多维数组

Visualize multidimensional Array in SVG

d3.js