D3.js强制直接绘制图形-圆圈中的png-使图像变为圆形 [英] D3.js Force Direct Graph - png's in circles - making the images circular

问题描述

我昨天问了这个问题，并得到了很好的重复问题答案-非常感谢Gerardo.

I asked this question yesterday and got a great duplicate question answer - many thanks Gerardo.

该示例使用了具有透明背景的图像(请参见下面的Opera和Chrome图像)，并且可以使用，但是，我想提供适合圆形的方形图像.

The example used images with transparent backgrounds (see Opera and Chrome image below) and it works a treat however, I would like to provide square images which fit inside the circle.

我已经在CSS和Bootstrap圆形图像中尝试过边界半径，但是它们不起作用-可能是因为它是标签而不是标签.

I've tried the border radius in CSS and Bootstrap circular image but these don't work - probably because it is an tag not an tag.

这里是渲染的标签，以防万一.

Here is the rendered tag in case that is helpful.

  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="female1.png" class="circle-image" height="40" width="40" x="-20" y="-20"></image>

是否将其设置为模式帮助?

Would setting it up as a pattern help?

推荐答案

您可以使用SVG

然后，在您的圈子中:

.attr("fill", "url(#foo")

这是一个演示:

var width = 400;
var height = 300;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
  
var defs = svg.append("defs");

defs.append('pattern')
  .attr("id", "dog")
  .attr("width", 1)
  .attr("height", 1)
  .append("svg:image")
  .attr("xlink:href", "http://cdn2-www.dogtime.com/assets/uploads/2010/12/senior-dog-2.jpg")
  .attr("width", 100)
  .attr("height", 100)
  .attr("y", -20)
  .attr("x", -20);

defs.append('pattern')
  .attr("id", "cat")
  .attr("width", 1)
  .attr("height", 1)
  .append("svg:image")
  .attr("xlink:href", "https://s-media-cache-ak0.pinimg.com/736x/92/9d/3d/929d3d9f76f406b5ac6020323d2d32dc.jpg")
  .attr("width", 120)
  .attr("height", 120)
  .attr("x", -30)
  .attr("y", -10);

var nodes = [{id:"foo"},{id:"bar"}, {id:"baz"},{id:"barbaz"}];

var edges = [{
  "source": 0,
  "target": 1
}, {
  "source": 0,
  "target": 2
}, {
  "source": 0,
  "target": 3
}];

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().distance(80))
  .force("charge", d3.forceManyBody().strength(-100))
  .force("center", d3.forceCenter(width / 2, height / 2));

var links = svg.selectAll("foo")
  .data(edges)
  .enter()
  .append("line")
  .style("stroke", "#ccc")
  .style("stroke-width", 1);

var node = svg.selectAll("foo")
  .data(nodes)
  .enter()
  .append("g")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

var nodeCircle = node.append("circle")
  .attr("r", 30)
  .attr("stroke", "gray")
  .attr("stroke-width", "2px")
  .attr("fill", function(d,i){
  return i%2 === 0 ? "url(#dog)" : "url(#cat)"
  });

var texts = node.append("text")
  .style("fill", "black")
  .attr("dx", 36)
  .attr("dy", 8)
  .text(function(d) {
    return d.id;
  });

simulation.nodes(nodes);
simulation.force("link")
  .links(edges);

simulation.on("tick", function() {
  links.attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    })

  node.attr("transform", (d) => "translate(" + d.x + "," + d.y + ")")


});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

这篇关于D3.js强制直接绘制图形-圆圈中的png-使图像变为圆形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！