Question

我正在尝试将center的{{1}}附加到images，但由于大小原因，我无法弄清楚如何设置circle和x的圆是动态的，并且随着y的宽度而变化。

给定当前圆的半径，找到svg和x坐标的公式是什么？

  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;
}

Answer 1

由于您已经在使用tbl %>% mutate( preceding = case %in% c("A", "B"), new_vals = if_else(preceding, all, all - B2) ) %>% bind_rows( group_by(., preceding) %>% summarise(case = "B2", new_vals = sum(B2)) ) %>% filter(!is.na(B2) | preceding == FALSE) %>% select(case, new_vals) %>% arrange(case) #> # A tibble: 5 x 2 #> case new_vals #> <chr> <dbl> #> 1 A 10 #> 2 B 20 #> 3 B2 25 #> 4 C 20 #> 5 D 25变换图像，导致图像以起点为相应圆的中心，因此您只需要使图像偏移各自的高度和宽度即可。

即应用以下x，y属性：

translate(" + d.x + "," + d.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>。希望这可以帮助。

气泡图中的d3.js中心图片

1 个答案: