Question

我有以下内容 - 我想要实现的是3个正方形，每个正方形连接到简单数据结构dta中的不同成员。如何将每个方块的颜色链接到colr中的字符串dta？

//############# SQUARES ###################
function dsSquares() {

  var dta = {
    categ: ["N", "P", "B"],
    colr: ["yellow", "pink", "blue"]
  }

  var basics = dsSquaresBasics();
  var margin = basics.margin,
    width = basics.width,
    height = basics.height;

  //Create SVG element
  var SQsvg = d3.select("#threeSquares")
    .append("svg:svg")
    //.data(dta)
    .attr({
      "width": width + margin.left + margin.right,
      "height": height + margin.top + margin.bottom,
      id: "squaresArea"
    });

  var SQg = SQsvg
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  SQg.selectAll("rect")
    .data(dta.categ)
    .enter()
    .append("rect")
    .attr({
      x: margin.left,
      y: function(d, i) {
        return i * 65
      },
      "width": width,
      "height": 50,
      //fill: 'green'  //<<<<<WORKS OK
      fill: dta.colr  //<<<<<NOT WORKING
    })
    .on("click", up);


  function up(d, i) {
    //update bar chart when user selects a square
    updateBarChart(d, "green");
    console.log(d);
  }

}

dsSquares();

以上是我第一次尝试使用D3的视觉效果的一部分，保存在这里：

https://plnkr.co/edit/Y5plUy?p=preview

请注意：我意识到上面的函数updateBarChart()尚未完全正常工作，但这是拼图中的下一个块，所以我不需要帮助...但是！

Answer 1

dta.colr中的数据未绑定到矩形。更好的方法是在对象数组中定义颜色和categ。

如果无法更改数据结构，可以根据索引为矩形着色：

fill: function(d,i){ return dat.colr[i];}

将3个简单的正方形链接到包含所需颜色的数据

1 个答案: