javascript - 动态颜色映射

Question

我正在使用 d3 根据名为 type 的属性对圆圈的填充进行颜色编码。它可能只有一种类型，也可能最多有两种。我的数据是这种结构:

var data = [{'company':'companyA','products':23,'aum':25997692757,'type':['Industry senior exe'],'date':'2015-02'},
{'company':'companyB','products':24,'aum':3548692757,'type':['Industry senior exe','Star'],'date':'2016-02'}
];

请注意，type 属性是一个列表。

var colorMap = {
    'Industry senior exe':'blue',
    'Star':'Gray'
};

如果只有一个type，那么圆的填充是微不足道的:

.style('fill', function(d) { return colorMap[d.type[0]})

然而，当列表长度较长时如何处理这种情况似乎有点高大上 -- d.type[1]。我的目标是:如果 type 不止一个，圆圈将一半是蓝色，一半是灰色。听起来很简单，但它真的难倒了我。

问题

我如何处理上述 d3 中的动态填充逻辑？

Answer 1

简单地说:您不能(在当前规范下)填充一个元素，如 <circle>有不止一种颜色。因此，一种可能的解决方案是使用 SVG <linearGradient> .

这种方法的缺点是，假设您有几个不同的圆圈和几种不同的颜色选择，提供了大量的组合，您将需要创建同样大量的线性渐变。

例如，使用 each输入选择后:

var gradient = svg.append("defs")
    .append("linearGradient")
    .attr("id", "gradient" + i)
    .attr("x1", "0%")
    .attr("x2", "100%")
  gradient.append("stop")
    .attr("offset", "50%")
    .attr("stop-color", colorMap[d.type[0]])
  gradient.append("stop")
    .attr("offset", "50%")
    .attr("stop-color", d.type.length === 2 ? colorMap[d.type[1]] : colorMap[d.type[0]]);

这是使用您的数据的演示:

var data = [{
    'company': 'companyA',
    'products': 23,
    'aum': 25997692757,
    'type': ['Industry senior exe'],
    'date': '2015-02'
  },
  {
    'company': 'companyB',
    'products': 24,
    'aum': 3548692757,
    'type': ['Industry senior exe', 'Star'],
    'date': '2016-02'
  }
];
var colorMap = {
  'Industry senior exe': 'blue',
  'Star': 'gray'
};
var svg = d3.select("svg");
var circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cy", 50)
  .attr("cx", (_, i) => 50 + i * 100)
  .attr("r", 40);
circles.each(function(d, i) {
  var gradient = svg.append("defs")
    .append("linearGradient")
    .attr("id", "gradient" + i)
    .attr("x1", "0%")
    .attr("x2", "100%")
  gradient.append("stop")
    .attr("offset", "50%")
    .attr("stop-color", colorMap[d.type[0]])
  gradient.append("stop")
    .attr("offset", "50%")
    .attr("stop-color", d.type.length === 2 ? colorMap[d.type[1]] : colorMap[d.type[0]]);
  d3.select(this)
    .attr("fill", "url(#gradient" + i + ")")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

另一方面，如果您只有两种组合——全蓝色和蓝灰色——您将只需要两个线性渐变。