Question

我想要读入几个外部SVG文件并定位。一些SVG文件是多边形，其他是路径。对于他们中的大多数人来说，当我读取文件时，我会特定一个随机数量来翻译文件。但我想为几个形状专门指定一个位置。（JSFiddle）。

var width = 300, height = 300;
var sampleSVG = d3.select("body")
    .append("svg")
    .attr( {width: width, height: height} );

var shapes = [
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-01.svg", number: 1, color: 'red'},
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-02.svg", number: 2, color: 'yellow'},
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-03.svg", number: 3, color: 'orange'},
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-04.svg", number: 4, color: 'green'},
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-05.svg", number: 5, color: 'blue'},
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-06.svg", number: 6, color: 'purple'},
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-07.svg", number: 7, color: 'red'},
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-08.svg", number: 8, color: 'orange'}];

var q = queue();
shapes.forEach(function(shape) { 
  q.defer(d3.xml, shape.url, "image/svg+xml"); 
});

q.awaitAll(function (error, results) {
    sampleSVG.selectAll('g.shape').data(shapes)
    // g tag is created for positioning the shape at random location
    .enter().append('g').attr('class', 'shape')
        .attr('transform', function () {
        return 'translate(' + Math.random() * (w - 50) + ',' + Math.random() * (h - 50) + ')'
    })
        .each(function (d, i) {
        // the loaded svg file is then appended inside the g tag
        this.appendChild(results[i].documentElement);
        d3.select(this).select('svg').select("*")
        .attr("stroke", function () {return d.color;})
        .attr('transform', function () {
            if (d.number > 6) {
               var newX = 200,
                   newY = 200;

               //This is where I want to set the position
               return 'scale(0.3) translate(0,0)'}

            else {return 'scale(0.1)'}

        ;})
    })
});

基本上，我希望形状具有不同的随机位置，除了我想要出现的两个形状（d.number > 6）（200,200）。

有没有办法重置translate然后再次使用新金额运行它，或者专门设置路径和多边形的位置？

Answer 1

目前尚不清楚，但我认为这正是您所寻找的：

q.awaitAll(function (error, results) {
  sampleSVG.selectAll('g.shape')
    .data(shapes)
  .enter()
    .append('g')
      .attr('class', 'shape')
      .each(function (d, i) {
        // the loaded svg file is then appended inside the g tag
        this.appendChild(results[i].documentElement);

        d3.select(this).select('svg').select("*")
          .attr("stroke", d.color);
      })
      .attr('transform', function (d, i) {
        // In general, in here we're setting the transform of a <g>, which contains an svg. So:
        if (d.number > 6) {
          var newX = 200,
              newY = 200;

          // What you return here will scale and translate the <g> (and the svg inside it)
          return 'scale(0.3) translate(0,0)';
        }
        else {
          return 'translate(' + Math.random() * (w - 50) + ',' + Math.random() * (h - 50) + ') scale(0.1)';
        }
      });
});

在d3中设置多边形和路径的位置

1 个答案: