I try to display circles on a map for a particular dataset. The dataset provides where to center the circle. The dataset contains an identifier (attribute name), a year (attribute year) and a value (attribute value)
I would like to display two things at this level:
Here is the code I use:
var circle = d3.geo.circle();
var color = d3.scale.threshold()
.domain([ 1800, 1850, 1900, 1950, 2000, 2050 ])
.range("#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f");
var elements = layerElement.selectAll('circle')
.data(data)
.enter()
.append('path')
.attr('id', function(d) {
return d.name;
});
elements
.datum(function(d) {
return circle
.origin(origin({d: d}))
.angle(radius({d: d}))();
})
.attr('class', 'point')
.attr('d', path)
.style('fill', function(d) {
return color(d.year);
})
.style('opacity', '0.6');
elements.on('click', function(d) {
(...)
});
I set an identifier to each circle. I see them within the in-memory SVG DOM:
<path id="Hoba"
class="point"
d="M488.55415440889976,286.8579825670507L488.45185788883936,284.8328597859807L488.56757478032006,282.785303550314L488.90003726486356,280.73774731464727L489.445602813917,278.71262453357724L490.1982940971579,276.7321228760774L491.14986447137636,274.8179411327541L492.2898883324236,272.99105147935524L493.6058753403125,271.2714697012249L495.0834072659968,269.6780358961697L496.7062959605052,268.2282080584055L498.45676071568937,266.9378708051187L500.3156230733832,265.82116134127676L502.2625169486039,264.890314569452...L508.2862800372698,302.266499816963L506.206659850514,302.3738076922315L504.15052774957604,302.26649981696306L502.14041114802717,301.9457518786948L500.19833330399786,301.41507805895924L498.3455720287532,300.680292531176L496.6024265625401,299.74944575935126L494.9879951718629,298.63273629550935L493.5199659048794,297.34239904222255L492.2144227974436,295.8925712044583L491.08566965304294,294.2991373994032L490.1460733273343,292.5795556212728L489.4059282342853,290.752665967874L488.8733435584207,288.8384842245506Z"
style="fill: yellow; opacity: 0.75;">
My problems are:
Within the function attr, the first parameter corresponds to the selected shape but there is no identifier in it. Here is the content I get:
{"type":"Polygon","coordinates":[[[5.279833759995999,-21.628058088269754],(...)[5.525725679844768,-22.85403683844725],[5.279833759996005,-21.628058088269807]]]}
So I can't get the corresponding value to apply a background color
I have the same problem when clicking the element
My question is how to get the identifier for the selected element (circle shape in my case).
Thanks very much for your help! Thierry
Your call to datum is generating a path from each data item but throwing away the rest of it, including the properties. If you want to keep the properties, nest the object that it generates:
.datum(function(d) {
return {
circle: circle
.origin(origin({d: d}))
.angle(radius({d: d}))(),
d: d
};
})
And then the rest of your calls will follow: like
.attr('d', function(d) { return path(d.circle); })
And
.style('fill', function(d) {
return color(d.d.year);
})
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments