javascript - 使用 D3.js 将图像放在旭日图的中心

Question

我几乎完成了一张可缩放的旭日图的制作，我最不想做的就是在中心放置一张图片。我已经检查了其他 stackoverflow 问题，但由于我对 D3.js 或 svg 图形不是很有经验，所以一直找不到可行的解决方案。
我在我使用的 JSON 文件中包含了一个图像属性，但中心是我想要图像的唯一位置。所以我一直在想直接把图片放在D3.js绘制的 Canvas 的中央会更好如果有人对如何解决此问题有任何建议或想法，我将不胜感激，谢谢。

这是 JSON 文件中的图像属性:

{
 "name": "Wine Aroma Wheel",
 "description": "The Davis Wine Aroma Wheel is divided into several sections to help you visualize the different flavors, scents and aromatic qualities found in most red and white wines, regardless of the grape variety.  The same aromatic complexities and sensations pictured on the wine aroma wheel are found in red and white wines all over the world, from Bordeaux, to California and the Rhone Valley, as well as every other viticultural area.",
 "image": "images/Grape-2.jpg",
 "children": [
  {
. . .

这是我的 CSS3 代码:

circle,
path {
  cursor: pointer;
}

circle {
  fill: none;
  pointer-events: all;  
}

#tooltip { background-color: white;
              padding: 3px 5px;
              border: 1px solid black;
              text-align: center;}

html {
    font-family: sans-serif;
}

这里是旭日图的 JavaScript 代码:

var margin = {top: 650, right: 650, bottom: 650, left: 650},
    radius = Math.min(margin.top, margin.right, margin.bottom, margin.left) - 168;

function filter_min_arc_size_text(d, i) {return (d.dx*d.depth*radius/1)>14};

var hue = d3.scale.category10();

var luminance = d3.scale.sqrt()
    .domain([0, 1e6])
    .clamp(true)
    .range([80, 20]);

var svg = d3.select("body").append("svg")
    .attr("width", margin.left + margin.right)
    .attr("height", margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var partition = d3.layout.partition()
    .sort(function(a, b) { return d3.ascending(a.name, b.name); })
    .size([2 * Math.PI, radius]);

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx - .01 / (d.depth + .5); })
    .innerRadius(function(d) { return (radius + 6) / 3 * d.depth; })
    .outerRadius(function(d) { return (radius + 6) / 3 * (d.depth + 1.) - 1; });

//Tooltip description
var tooltip = d3.select("body")
    .append("div")
    .attr("id", "tooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("opacity", 0);

function format_number(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}


function format_description(d) {
  var description = d.description;
      return  '<b>' + d.name + '</b></br>'+ d.description + '<br> (' + format_number(d.value) + ')';
}

function computeTextRotation(d) {
    var rotation = (d.x + d.dx / 2) * 180 / Math.PI - 90;
    return {
        global: rotation,
        correction: rotation > 90 ? 180 : 0
    };
}

function isRotated(d) {
    var rotation = (d.x + d.dx / 2) * 180 / Math.PI - 90;
    return rotation > 90 ? true : false
}

function mouseOverArc(d) {
             d3.select(this).attr("stroke","black")
          tooltip.html(format_description(d));
          return tooltip.transition()
            .duration(50)
            .style("opacity", 0.9);
        }

function mouseOutArc(){
    d3.select(this).attr("stroke","")
    return tooltip.style("opacity", 0);
}

function mouseMoveArc (d) {
          return tooltip
            .style("top", (d3.event.pageY-10)+"px")
            .style("left", (d3.event.pageX+10)+"px");
}

var root_ = null;
d3.json("data/davis-aroma-wheel.json", function(error, root) {
  if (error) return console.warn(error);
  // Compute the initial layout on the entire tree to sum sizes.
  // Also compute the full name and fill color for each node,
  // and stash the children so they can be restored as we descend.

  partition
      .value(function(d) { return d.size; })
      .nodes(root)
      .forEach(function(d) {
        d._children = d.children;
        d.sum = d.value;
        d.key = key(d);
        d.fill = fill(d);
      });

  // Now redefine the value function to use the previously-computed sum.
  partition
      .children(function(d, depth) { return depth < 3 ? d._children : null; })
      .value(function(d) { return d.sum; });

  var center = svg.append("circle")
      .attr("r", radius / 3)
      .on("click", zoomOut);

  center.append("title")
      .text("Zoom Out");


  var partitioned_data = partition.nodes(root).slice(1)

  var path = svg.selectAll("path")
      .data(partitioned_data)
      .enter().append("path")
      .attr("d", arc)
      .style("fill", function(d) { return d.fill; })
      .each(function(d) { this._current = updateArc(d); })
      .on("click", zoomIn)
          .on("mouseover", mouseOverArc)
      .on("mousemove", mouseMoveArc)
      .on("mouseout", mouseOutArc);

  var texts = svg.selectAll("text")
      .data(partitioned_data)
      .enter().append("text")
          .filter(filter_min_arc_size_text)
      .attr("transform", function(d) 
        {
          var r = computeTextRotation(d);
          return "rotate(" + r.global + ")"
            + "translate(" + radius / 3. * d.depth + ")"
            + "rotate(" + -r.correction + ")";
        })
      .style("font-weight", "bold")
      .style("text-anchor", "middle")
          .attr("dx", function(d) {return isRotated(d) ? "-85" : "85"}) //margin
      .attr("dy", ".35em") // vertical-align
      .on("click", zoomIn)
          .text(function(d,i) {return d.name})

  function zoomIn(p) {
    if (p.depth > 1) p = p.parent;
    if (!p.children) return;
    zoom(p, p);
  }

  function zoomOut(p) {
    if (!p.parent) return;
    zoom(p.parent, p);
  }

  // Zoom to the specified new root.
  function zoom(root, p) {
    if (document.documentElement.__transition__) return;

    // Rescale outside angles to match the new layout.
    var enterArc,
        exitArc,
        outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]);

    function insideArc(d) {
      return p.key > d.key
          ? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key
          ? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0}
          : {depth: 0, x: 0, dx: 2 * Math.PI};
    }

    function outsideArc(d) {
      return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)};
    }

    center.datum(root);

    // When zooming in, arcs enter from the outside and exit to the inside.
    // Entering outside arcs start from the old layout.
    if (root === p) enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]);

     var new_data=partition.nodes(root).slice(1)

    path = path.data(new_data, function(d) { return d.key; });

     // When zooming out, arcs enter from the inside and exit to the outside.
    // Exiting outside arcs transition to the new layout.
    if (root !== p) enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]);

    d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function() {
      path.exit().transition()
          .style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; })
          .attrTween("d", function(d) { return arcTween.call(this, exitArc(d)); })
          .remove();

      path.enter().append("path")
        .style("fill-opacity", function(d) { return d.depth === 2 - (root === p) ? 1 : 0; })
        .style("fill", function(d) { return d.fill; })
        .on("click", zoomIn)
              .on("mouseover", mouseOverArc)
        .on("mousemove", mouseMoveArc)
        .on("mouseout", mouseOutArc)
        .each(function(d) { this._current = enterArc(d); });


      path.transition()
          .style("fill-opacity", 1)
          .attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); });

    });


     texts = texts.data(new_data, function(d) { return d.key; })

    texts.exit()
        .remove()
    texts.enter()
      .append("text")

    texts.style("opacity", 0)
      .attr("transform", function(d) {
        var r = computeTextRotation(d);
        return "rotate(" + r.global + ")" 
        + "translate(" + radius / 3 * d.depth + ",0)" 
        + "rotate(" + -r.correction + ")";
      })
      .style("font-weight", "bold")
      .style("text-anchor", "middle")
          .attr("dx", function(d) {return isRotated(d) ? "-85" : "85"}) //margin
      .attr("dy", ".35em") // vertical-align
      .filter(filter_min_arc_size_text)
      .on("click", zoomIn)
      .text(function(d,i) {return d.name})
          .transition().delay(750).style("opacity", 1)

  }
});

function key(d) {
  var k = [], p = d;
  while (p.depth) k.push(p.name), p = p.parent;
  return k.reverse().join(".");
}

function fill(d) {
  var p = d;
  while (p.depth > 1) p = p.parent;
  var c = d3.lab(hue(p.name));
  c.l = luminance(d.sum);
  return c;
}

function arcTween(b) {
  var i = d3.interpolate(this._current, b);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

function updateArc(d) {
  return {depth: d.depth, x: d.x, dx: d.dx};
}

d3.select(self.frameElement).style("height", margin.top + margin.bottom + "px");

Answer 1

您可以在 svg 中使用图像元素。 ( Reference here )

根据你的代码使用d3，它会是这样的

svg.append("image").attr("xlink:href", "firefox.jpg")
    .attr("width", w).attr("height", h)
    .attr("x", -w/2).attr("y", -h/2)