javascript - d3.js 气泡图中的中心图像

Question

我正在尝试将我的附加图像居中到圆，但我不知道如何设置我的x 和 y，因为圆的大小是动态的，并且随着 svg 的宽度而变化。

在给定当前圆半径的情况下查找 x 和 y 坐标的公式是什么？

  vis
    .enter()
    .append("svg:image")
    .attr("transform", d => "translate(" + d.x + "," + d.y + ")")
    .attr("xlink:href", function(d) {
      return d.img;
    })
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", d => d.r / 1.5);

(function() {
  var json = {
    call_data: [
      [
        "Lifestyle",
        1,
        "https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/5bb3ce2f801fbc657f83dd57_pp-lifestyle(white).svg"
      ],
      [
        "Sports",
        10,
        "https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/5c9131911ad86f445cb5abc7_pp-sport(white).svg"
      ],
      [
        "Environment",
        8,
        "https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f2a4bef42fff000159ba7a_pp-environ(white).svg"
      ],
      [
        "Medical",
        6,
        "https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f2a4dc831e8500015fda53_pp-health(white).svg"
      ],
      [
        "Food",
        4,
        "https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f8c2cc78cc2d0001fd4a7e_pp-food(white).svg"
      ]
    ]
  };

  var svg = d3
    .select(".bubble_chart")
    .append("svg")
    /*
    .attr("width", diameter)
    .attr("height", diameter);
*/
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", "0 0 600 400")
    //class to make it responsive
    .classed("svg-content-responsive", true);

  var bubble = d3.layout
    .pack()
    .size([600, 400])
    .value(function(d) {
      return d.size;
    })
    .padding(2);

  // generate data with calculated layout values
  var nodes = bubble.nodes(processData(json)).filter(function(d) {
    return !d.children;
  }); // filter out the outer bubble

  var vis = svg.selectAll("circle").data(nodes, function(d, i) {
    return d.name + i;
  });

  vis
    .enter()
    .append("circle")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    })
    .attr("class", function(d) {
      return d.className;
    })
    .attr("r", 0)
    .transition()
    .duration(1000)
    .attr("r", function(d) {
      return d.r;
    });

  vis
    .enter()
    .append("svg:image")
    .attr("transform", d => "translate(" + d.x + "," + d.y + ")")
    .attr("xlink:href", function(d) {
      return d.img;
    })
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", d => d.r / 1.5);

  function processData(data) {
    var obj = data.call_data;

    var newDataSet = [];

    for (var prop in obj) {
      newDataSet.push({
        name: obj[prop][0],
        className: obj[prop][0].toLowerCase(),
        size: obj[prop][1],
        img: obj[prop][2]
      });
    }
    return {
      children: newDataSet
    };
  }
})();

.lifestyle {
  fill: #89BED3;
}

.sports {
  fill: #2A83D4;
}

.environment {
  fill: #6CC070;
}

.food {
  fill: #665C9E;
}

.medical {
  fill: #C13E40;
}

.bubble_chart {
  border: 2px solid red;
  display: inline-block;
  position: absolute;
  width: 100%;
  padding-bottom: 100%;
  /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
}

.svg-content-responsive {
  border: 3px solid green;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.js"></script>
<div class="container">
  <div class="bubble_chart"></div>
</div>

Answer 1

由于您已经使用 translate("+ d.x + ","+ d.y + ") 转换图像，这会导致图像的起点作为相应圆的中心，您只需将图像各自的高度和宽度偏移即可。

即应用以下 x、y 属性:

.attr('x', d => -(d.r/1.5)/2)
.attr('y', d => -(d.r/1.5)/2)

将图像居中，其中 (d.r/1.5) 是图像的宽度/高度。

代码片段:

(function() {
  var json = {
    call_data: [
      [
        "Lifestyle",
        1,
        "https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/5bb3ce2f801fbc657f83dd57_pp-lifestyle(white).svg"
      ],
      [
        "Sports",
        10,
        "https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/5c9131911ad86f445cb5abc7_pp-sport(white).svg"
      ],
      [
        "Environment",
        8,
        "https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f2a4bef42fff000159ba7a_pp-environ(white).svg"
      ],
      [
        "Medical",
        6,
        "https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f2a4dc831e8500015fda53_pp-health(white).svg"
      ],
      [
        "Food",
        4,
        "https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f8c2cc78cc2d0001fd4a7e_pp-food(white).svg"
      ]
    ]
  };

  var svg = d3
    .select(".bubble_chart")
    .append("svg")
    /*
    .attr("width", diameter)
    .attr("height", diameter);
*/
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", "0 0 600 400")
    //class to make it responsive
    .classed("svg-content-responsive", true);

  var bubble = d3.layout
    .pack()
    .size([600, 400])
    .value(function(d) {
      return d.size;
    })
    .padding(2);

  // generate data with calculated layout values
  var nodes = bubble.nodes(processData(json)).filter(function(d) {
    return !d.children;
  }); // filter out the outer bubble

  var vis = svg.selectAll("circle").data(nodes, function(d, i) {
    return d.name + i;
  });

  vis
    .enter()
    .append("circle")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    })
    .attr("class", function(d) {
      return d.className;
    })
    .attr("r", 0)
    .transition()
    .duration(1000)
    .attr("r", function(d) {
      return d.r;
    });

  vis
    .enter()
    .append("svg:image").style('opacity', 0)
    .attr("transform", d => "translate(" + d.x + "," + d.y + ")")
    .attr('x', d => -(d.r/1.5)/2)
    .attr('y', d => -(d.r/1.5)/2)
    .attr("xlink:href", function(d) {
      return d.img;
    })
    .attr("width", d => d.r / 1.5).transition().duration(1000).style('opacity', 1);

  function processData(data) {
    var obj = data.call_data;

    var newDataSet = [];

    for (var prop in obj) {
      newDataSet.push({
        name: obj[prop][0],
        className: obj[prop][0].toLowerCase(),
        size: obj[prop][1],
        img: obj[prop][2]
      });
    }
    return {
      children: newDataSet
    };
  }
})();

.lifestyle {
  fill: #89BED3;
}

.sports {
  fill: #2A83D4;
}

.environment {
  fill: #6CC070;
}

.food {
  fill: #665C9E;
}

.medical {
  fill: #C13E40;
}

.bubble_chart {
  border: 2px solid red;
  display: inline-block;
  position: absolute;
  width: 100%;
  padding-bottom: 100%;
  /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
}

.svg-content-responsive {
  border: 3px solid green;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.js"></script>
<div class="container">
  <div class="bubble_chart"></div>
</div>

此外，我还为图像的不透明度添加了一个额外的过渡，以与圆圈可见性相匹配 - .transition().duration(1000).style('opacity', 1)。希望这可以帮助。