d3:对象的子数组

d3: A sub array of objects

本文关键字：数组 对象 d3      更新时间：2024-07-03

我有以下结构：

[
    { 'length': 10, attributes: [1,2,3] },
    { 'length': 7, attributes: [1,3,4,5] },
    { 'length': 12, attributes: [3,5,7,9,10] },
]
 and I am doing the following:

x = d3.scale.linear().domain([0, maxHeight]).range([50, w]),
y = d3.scale.linear().domain([0, maxHeight]).range([h, 20]);
z = d3.scale.linear().domain([0, maxHeight]).range([0, h - 20]);
var chart = svg.selectAll("g.chart")
    .data(items)
    .enter()
    .append("svg:g")
    .attr("class", "chart");
chart.append("svg:rect")
    .attr("fill", 'darkblue')
    .attr("class", 'data')
    .attr("x", function(d, i) { return x(i+1); })
    .attr("y", function(d, i) { return bottom - z(d['length']) + 15 })
    .attr("width", 4)
    .attr("height", function(d, i)  { return z(d['length']) - z(d['min']); })

我想做的是在每个矩形上添加圆圈，这与我的结构中的属性相对应。基本上，（对于一个"项目"），我应该看到这样的东西：

<g class="chart">
    <rect fill="darkblue" class="data" x="626.1538461538462" y="15" width="6" height="530"></rect>
    <circle cx="626.1538461538462" cy="(y1)" r="5" style="fill: #ffff00; stroke: #808080;"></circle>
    <circle cx="626.1538461538462" cy="(y2)" r="5" style="fill: #ffff00; stroke: #808080;"></circle>
    <circle cx="626.1538461538462" cy="(y3)" r="5" style="fill: #ffff00; stroke: #808080;"></circle>
</g>

我唯一能想到的就是在属性上循环并逐元素添加它们：

for (z=0; z< 3; ++z)
{
    chart.append("svg:circle")
    .data(items[z]['attributes'])
    .style("fill", 'yellow')
    .style("stroke", "gray")
    .attr("cx", function(d, i) { return x(i+1); })
    .attr("cy", function(d, i) 
    { 
        console.log(d); 
        return bottom - 15;
    })
    .attr("r", 5);
}

有更好的方法吗？

您可以创建嵌套选择而不是循环：

chart.selectAll("svg:circle")
    .data(function(item) { return item.attributes; })
  .enter()
    .append("svg:circle")
    .style("fill", 'yellow')
    .style("stroke", "gray")
    .attr("cx", function(d, i) { return x(i+1); })
    .attr("cy", function(d, i) 
    { 
        console.log(d); 
        return bottom - 15;
    })
    .attr("r", 5);

示例：

为了使每个parent和rect的cx保持相同，可以通过传递parent_idx

chart.selectAll("svg:circle")
    .data(function(item, parent_idx) { 
        return item.attributes.map(function (attr_val) {
                 return { attr_val: attr_val, parent_idx: parent_idx };
            });
    })
  .enter()
    .append("svg:circle")
    .style("fill", 'yellow')
    .style("stroke", "gray")
    .attr("cx", function(d, i) { return x(d.parent_idx); })
    .attr("cy", function(d, i) 
    { 
        return y(d.attr_val);
    })
    .attr("r", 5);

您可以使用嵌套选择。主选择将创建组，每个组都将绑定一个数据项。

var data = [
    {name: 'A', items: [1, 2]},
    {name: 'B', items: [2, 3, 4]}
];
var cScale = d3.scale.category10()
    .domain(d3.range(10));
var grp = svg.selectAll('g.main')
    .data(data)
    .enter()
    .append('g')
    .attr('class', 'main')
    .attr('transform', function(d, i) {
        return 'translate(0,' + i * 20 + ')';
    });

然后，可以创建嵌套选择，将访问器函数传递给数据方法。我有一个rect元素的例子，但圆圈是一样的：

grp.selectAll('rect')
    .data(function(d) { return d.items; })
    .enter()
    .append('rect')
    .attr('x', function(d) { return 10 * d; })
    .attr('width', 8)
    .attr('height', 10)
    .attr('fill', function(d) { return cScale(d); });

你可能会发现"嵌套选择"一文很有用。我也写了一首小小提琴：http://jsfiddle.net/pnavarrc/h2YVd/

相关文章：