在SVG中可视化多维数组

Question

我有一个绑定到g元素的对象数组。对于每个g元素，我生成一个rect元素。它到目前为止工作但现在我想拥有一个动态数量的＆＃34;部件＆＃34;在每个g元素中，它应该在现有的rect中生成一个新的rect和text元素。

在这里你可以找到我的例子或者在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; });

THX。

Answer 1

您可以使用subselection绑定您的部件＆＃39;使用像这样的访问器函数将数据传递给相应的元素：

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

在您手中进行此子选择后，您可以插入/追加内容，访问绑定到每个组/部分的相应数据。

＆＃13;

＆＃13;

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; });    

＆＃13;

g.part rect {
    fill:white;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用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);
    });
});

＆＃13;

＆＃13;

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);
    });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;