如何使用d3在javascript中动态添加图像作为圆的填充

How can I add an image as the fill for a circle dynamically in javascript using d3

本文关键字：图像 填充 添加 动态 d3 何使用 javascript      更新时间：2023-09-26

我有一系列图像，每个图像都有一个日期作为名称。我使用d3创建了一个表（每行都有一个日期），并试图将相应的图像添加到表的每行。我最初创建了一个图案，然后添加了一个以我的图像为填充的圆圈：

 <!DOCTYPE html>
<meta charset="utf-8">

<style>
 td, th {
    padding: 4px 10px;
} 

</style>
<body>
    <div id="tooltip" class="hidden">
        <p><strong>Total Steps</strong></p>
    </div>
<svg id="mySvg" width="0" height="0">   
  <defs id="mdef">
    <pattern id="image" x="0" y="0" height="20" width="20">
      <image x="0" y="0" width="30" height="30" xlink:href="images/2015-10-15.jpg"></image> 
     </pattern>
 </defs>
 </svg>   

<script src="d3.min.js"></script>

<script>

d3.csv("step_data.csv", type, function(error, data) {
  if (error) throw error;

// render the table
 var daytaTable = tabulate(data, ["date", "steps", "pic1", "pic2"]);

});
function type(d) {
  d.steps = +d.steps;
  return d;
}
// The table generation function
function tabulate(data, columns) {
  var table = d3.select("body").append("table")
        .attr("style", "margin-left: 4px"),
    thead = table.append("thead"),
    tbody = table.append("tbody");
// append the header row
thead.append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
        .text(function(column) { return column; });
// create a row for each object in the data
var rows = tbody.selectAll("tr")
    .data(data)
    .enter()
    .append("tr");

// create a cell in each row for each column
 var cells = rows.selectAll("td")
    .data(function(row) {
        return columns.map(function(column) {
            return {column: column, value: row[column]};
        });
    })
    .enter()
    .append("td")
    .attr("style", "font-family: Courier") // sets the font style
        .html(function(d) { return d.value; });

var cells = rows.selectAll("td")
    .data(function(row) {
        return columns.map(function(column) {
            return {column: column, value: row[column]};
        });
    })

    .filter(function(d){ return d.column == 'pic1'})
    .append(function(d) {
      return createSVG(d);
    });


  return table;

}

function createSVG(d) {

  var w = 30;
  var h = 30;
  var kpi = document.createElement("div");
  var svg = d3.select(kpi).append("svg")
    .attr({
      width: w,
      height: h
    });

  var elem = svg.selectAll("div")
    .data([d]);
  var elemEnter = elem.enter()
    .append("g");

  elemEnter.append("circle")
    .filter(function(d){ return d.column == 'pic1'})
    .attr({
      cx: 28,
      cy: 25,
      r: 20
    })

  //  .style("fill", "url(#image)");
  //  .style("fill", "url(images/2015-10-15.jpg")
      .style("fill", "red")

  return kpi;
  }

</script>

只有当每一行都得到相同的图片时，这才有效。有没有办法从javascript动态更新xlink:href并使每一行独立？也许更好的选择是不使用模式，而是使用另一种方法将适当的图像动态添加到每一行？

我理解您的问题的方式是，日期只是图像路径数组中的一个键。以下代码根据数据中的索引i更改每个圆的fill属性。这应该是解决你的问题的一个良好开端。

var images = ["img1.png","img2.png","img3.png"];
d3.selectAll("circle")
   .data(images)
     .enter()
   .style("fill",function(d,i){ return "url(" + d + ")"; });

这是一篇关于d3 enter和exit 使用的好文章

相关文章：