ho la seguente struttura:d3: Un sotto array di oggetti
[
{ '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']); })
Cosa vorrei fare è aggiungere cerchi su ciascuno di questi rettangoli che corrisponde agli attributi nella mia struttura. In sostanza, (per una 'voce'}, dovrei vedere qualcosa di simile:
<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>
L'unica cosa che posso pensare è looping sugli attributi e aggiungendo loro elemento per elemento:
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);
}
c'è un modo migliore per fare questo?
L'unico io Ho notato che i cerchi dovrebbero essere sulla stessa linea sull'asse x. Fondamentalmente questi cerchi dovrebbero essere sulla stessa linea (impilati in cima al rettangolo) – Paul
@Paul ha aggiornato la risposta mantenendo 'cx' stesso per' rect'. –
Questo è perfetto, funziona alla grande! Grazie! – Paul