Geek Answers Handbook

How to create different types of SVG elements based on data?

I'm trying to create a diverse legend that has circles of triangles, rectangles, lines, etc., and I want to create them myself, and then use d3 to arrange their position and color, but how can I access this data directly?

d3.selectAll('g.legend')
  .data([
    // is there a way to have d3 create an element in memory but not append it?
    { svgFn: function() { this.append('rect') }, ...otherinfo },
    { svgFn: function() { this.append('circle') }, ...otherinfo },
  ]).enter()
    .append('g')
      .append(function(d) { d.svgFn.call(this)})
      .attr...
+4
source share
2 answers

This question is a variation. How to create data-based items? or how to add items dynamically? template. In my opinion, your approach will be too complicated and cluttered, because you need to duplicate functions to create elements in your data. This does not seem like an elegant solution.

, .. {type: "circle"}, {type: "rect"} .., selection.append() . , , , , , :

# . () <>
[...]
, , (d), (i) (), DOM, .

:

d3.selectAll('g.legend')
  .data([
    { type: 'rect', other: info },
    { type: 'circle', other: info }
  ])
  .enter().append('g')
  .append(function(d) { 
    return document.createElementNS(d3.namespaces.svg, d.type);
  });

user2167582 .

D3 v4 d3-selection-multi , , - . , :

var elementsAndAttributes = [
    { type: 'rect', attrs: { "fill": "blue", "width": "10", "height": "10" } },
    { type: 'circle', attrs: { "fill": "red", "cx": "20", "cy": "20", "r": "10" } }
];

:

d3.selectAll('g.legend')
  .data(elementsAndAttributes)
  .enter().append('g')
  .append(function(d) {                // Create elements from data
    return document.createElementNS(d3.namespaces.svg, d.type);   // v4 namespace
  })
    .attrs(function(d) {               // Set the attributes object per element
      return d.attrs;
    });

D3 v3 -. v3 , (. № 277 " "), , . ). selection.each() .

d3.selectAll('g.legend')
  .data(elementsAndAttributes)
  .enter().append('g')
  .append(function(d) {                // Create elements from data
    return document.createElementNS(d3.ns.prefix.svg, d.type);  // v3 namespace
  })
    .each(function(d) {                // Iterate over all appended elements
      d3.select(this).attr(d.attrs);   // Set the attributes object per element
    });

, D3 , , selection.each(), D3 v3, v4.

: "- d3".

+7

selection.append("div");

:

selection.append(d3.creator("div"));

d3

var svg = d3.select("#chart"); // or any other selection to get svg element
d3.selectAll('g.legend')
  .data(elementsAndAttributes)
  .enter().append('g')
  .append(function(d) {                // Create elements from data
    return d3.creator(d.type).bind(svg.node())();
  })
  .attrs(function(d) {               // Set the attributes object per element
      return d.attrs;
  });

creator(), appendChild(child). bind ,

  .append(function(d) {                // Create elements from data
    return d3.creator(d.type).call(svg.node());
  })

, this , , , this this.ownerDocument (=== document for browsers), creator() (g) . , (svg) .

0

More articles:


All Articles