Блог

Главная - Вопросы по программированию - d3.js центральное изображение на пузырьковой диаграмме

d3.js центральное изображение на пузырьковой диаграмме

#javascript #jquery #d3.js

#javascript #jquery #d3.js

Вопрос:

Я пытаюсь center добавить свое приложение images к circle , но я не могу понять, как настроить мое 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>

Ответ №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) . Надеюсь, это поможет.