Question

我有一系列图像，每个图像都有一个日期作为名称。我使用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并使每一行独立？也许更好的选择是不使用模式，而是使用另一种方法动态地将适当的图像添加到每一行？

Answer 1

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

＆＃13;

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

＆＃13;

This对于使用d3 enter和exit

是一个很好的解读

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

1 个答案: