0

使用 d3 将整个系列的 svg 元素附加到特定选择的最佳方法是什么。例如...首先我附加一个矩形。

        tb.append("svg:rect")
        .attr("width", "18")
        .attr("height", "18")
        .attr("y", "9")
        .attr("x", (i * 20) + 5)
        .attr("rx", "4")
        .attr("ry", "4");

现在取决于我想附加一个图标的选项。图标可以是一系列路径或矩形或多边形。但是是动态的并且基于选项。所以我想做类似的事情：

tb.append('<path d="M9.826,4.703C8.863,3.057,7.014,2.032,5.001,2.032c-2.012,0-3.861,1.024-4.829,2.671L0,5l0.173,0.299C1.141,6.944,2.99,7.968,5.001,7.968c2.012,0,3.862-1.023,4.825-2.669L10,5L9.826,4.703z M8.451,5.189C7.764,6.235,6.441,6.888,5,6.888c-1.438,0-2.762-0.652-3.453-1.698l-0.124-0.19l0.124-0.188C2.239,3.764,3.562,3.112,5,3.112c1.441,0,2.763,0.651,3.451,1.698l0.125,0.188L8.451,5.189z"/><circle cx="4.999" cy="5" r="1.905"/>');

或者

tb.append('<polygon points="8.272,0 5.8,4.166 9,4.166 1.615,10 3.461,5 1,5 3.743,0.007"/>');

但是我不知道输入的元素类型或不同的属性。是否有一种模式可以将整个元素作为字符串插入？还是更好的模式？

4

1 回答 1

6

编辑：我刚刚在下面输入了答案，但是，在重新阅读您的问题后，我不确定“动态和基于选项”是否实际上意味着图标类型取决于数据。如果我误解了，请告诉我，我会删除这个答案......

假设您拥有dataArray组成数据的对象数组。

然后你有：

var selection = d3.selectAll('.icon').data(dataArray)

然后，听起来您要问的是根据您的数据有条件地创建元素，例如，或者<rect>或。<circle>理想情况下，您想要的 –– 但 d3 不会让您这样做 –– 是：

selection.enter()
  .append(function(d) { // <-- doesn't work :(
    return d.type == 'round' ? 'circle' : 'rect';
  })
  .attr('class', 'icon');

即，该.append()方法不接受函数。所以，相反，你可以做的是：

selection.enter()
  .append('g')
  .each(function(d, i) {
    var g = d3.select(this); // That's the svg:g we've just created
    if(d.type == 'round')
      g.append('circle')
    else
      g.append('rect')
  })
  .attr('class', 'icon');

你在 DOM 中得到的东西是这样的（当然取决于里面的东西dataArray）：

<svg>
  <g class="icon">
    <circle>
  </g>
  <g class="icon">
    <rect>
  </g>
  <g class="icon">
    <rect>
  </g>
  <g class="icon">
    <circle>
  </g>
于 2013-04-03T22:41:15.463 回答