链接3个简单的正方形数据，其中包括所需的颜色

Linking 3 simple squares to data which includes required color

本文关键字：其中包括 颜色 数据 3个 简单 正方形 链接      更新时间：2023-09-26

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

//############# 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 =

预览

请注意:我意识到上面的updateBarChart()函数还没有完全工作，但这是拼图中的下一个块，所以我不需要帮助……

dta.colr中的数据不与矩形绑定。一个更好的方法是将颜色与categ一起定义在对象数组中。

如果不能改变你的数据结构，你可以根据它们的索引给矩形上色:

fill: function(d,i){ return dat.colr[i];}
相关文章：