Диаграмма силы d3.js

Я работаю над приложением силовой диаграммы d3.js. Мне любопытно узнать, как бы я заменил центральный синий круг изображением. Заполнить фон круга URL-адресом изображения — значит, иметь круглое изображение?

http://jsfiddle.net/LsMZp/1/

так что вместо заполнения - можно ли использовать только фоновый URL?

    var circle = svg.append("svg:g").selectAll("circle").data(force.nodes()).enter().append("svg:circle").attr("r", function(d) {
        return getRadius(d);
    }).style("fill", function(d) {
        return color(d.group);
    }).call(force.drag);

javascript d3.js force-layout
person The Old County    schedule 11.02.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вам не требуется, чтобы ваше изображение было обрезано за пределами круга (я не уверен, хотите ли вы этого или нет), вы можете определить новую группу элементов:

var image = svg.selectAll(".image");
// Bind to data
image = image.data(force.nodes());
image.enter().append("image")
 .attr("xlink:href", "<url to your image here>")
 .attr("class", "image");

А затем в вашей функции tick

function tick() {
    link.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("cx", function(d) {return d.x})
        .attr("cy", function(d) {return d.y});
    image.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}
person Barnabé Monnot    schedule 11.02.2014

arrow_upward
1
arrow_downward

Вы можете сделать это, определив шаблон:

<svg>
  <defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="http://www.telascupece.com.br/image/chapa_perfurada.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
  </defs>
</svg>

А затем, используя его в своем круге, заполните:

var circle = svg.append("svg:g")
  .selectAll("circle")
  .data(force.nodes())
  .enter()
  .append("svg:circle")
  .attr("r", function(d) {
    return getRadius(d);
  })
  .style("fill", function(d) {
    return "url(#img1)";
  })
  .call(force.drag);

См. обновленный пример: http://jsfiddle.net/LsMZp/2/

введите здесь описание изображения

person iros    schedule 11.02.2014
comment
Мне очень понравилось использование шаблонов. Надеюсь, вы не против добавить фото. - person VividD; 03.06.2014
comment
Нет проблем @VividD! Спасибо! - person iros; 08.09.2015