Question

第一次使用d3.js并尝试使用此示例：http://bl.ocks.org/christophermanning/1734663在我正在制作的网站中，但我希望将形状填充为图像而不是紫色。

我认为相关代码在更新函数内部如下：

    path = path.data(d3_geom_voronoi(vertices))
    path.enter().append("path")
        // drag node by dragging cell
        .call(d3.behavior.drag()
          .on("drag", function(d, i) {
              vertices[i] = {x: vertices[i].x + d3.event.dx, y: vertices[i].y + d3.event.dy}
          })
        )
        .style("fill", function(d, i) { return color(0) })
    path.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
        .transition().duration(150).style("fill", function(d, i) { return color(d3.geom.polygon(d).area()) })
    path.exit().remove();

首先我发表评论..

    .style("fill", function(d, i) { return color(d3.geom.polygon(d).area()) })

..所以我的图片填充在更新时不会被覆盖，然后我需要替换..

    .style("fill", function(d, i) { return color(0) })

..带有“东西”，但在我更换之前，我通过添加..来定义图像。

var image = svg.append("image")
  .attr("xlink:href", "http://lorempixel.com/g/400/400/")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 400)
  .attr("height", 400)
  .attr("id", "fillImage");

..在更新功能之前，然后我尝试用以下内容替换填充代码：

  .style("fill", function(d, i) { return "url('#fillImage')" })

或

  .style("fill", function(d, i) { return "url(#fillImage)" })

或

  .style("fill", "url('#fillImage')")

或

  .style("fill", "url(#fillImage)")

或者全部相同，除了使用“attr”而不是“style”，以及不使用id但是图像变量，所以：image，image [0]，image [0] [0]，image [0 ] [0] .outerHTML。但似乎没有任何效果，所以任何想法？

如何在d3.js中将图像设置为路径的背景？

0 个答案: