d3: वस्तुओं

Question

का एक उप सरणी मैं निम्नलिखित संरचना है:

[ 
    { '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); 
} 

वहाँ यह करने के लिए एक बेहतर तरीका है?

Answer 1

आप पाशन के बजाय एक नेस्टेड चयन बनाया जा सकता है: मैं भी एक छोटे से jsfiddle लिखा था 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); 

Answer 2

आप नेस्टेड चयन कर सकते हैं। प्राथमिक चयन समूह बन जाएंगे, प्रत्येक समूह यह करने के लिए बाध्य एक डेटा आइटम होगा।

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

फिर, आप डेटा विधि में एक एक्सेसर फ़ंक्शन पास करते हुए, नेस्टेड चयन बना सकते हैं। मैं रेक्ट तत्वों के साथ एक उदाहरण है, लेकिन हलकों के साथ एक ही है:

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

आप लेख Nested Selections उपयोगी पाया सकता है।

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

उदाहरण:

cx प्रत्येक parentrect के लिए एक ही रखने के लिए, आप कर सकते हैं http://jsfiddle.net/pnavarrc/h2YVd/