来自json的D3颜色十六进制

Question

我正在尝试用来自json 的hexdecimal 颜色填充3D.js 中的节点。所以这里是json文件的例子。

{"nodes":[{"name":"GCF_000008865.1",
"choose":"1",
"organism_name":"Escherichia coli O157:H7 str. Sakai",
"classification":"cellular organisms; Bacteria; Proteobacteria; Gammaproteobacteria; Enterobacterales; Enterobacteriaceae; Escherichia; Escherichia coli; Escherichia coli O157:H7;",
"lineage":"bacteria>proteobacteria>gammaproteobacteria",
"genera":"Escherichia",
"colorsamp":"#E7298A",
"id":"GCF_000008865.1"},
{"name":"GCF_000006945.2",
"choose":"1",
"organism_name":"Salmonella enterica subsp. enterica serovar Typhimurium str. LT2","classification":"cellular organisms; Bacteria; Proteobacteria; Gammaproteobacteria; Enterobacterales; Enterobacteriaceae; Salmonella; Salmonella enterica; Salmonella enterica subsp. enterica; Salmonella enterica subsp. enterica serovar Typhimurium;",
"lineage":"bacteria>proteobacteria>gammaproteobacteria",
"genera":"Salmonella",
"colorsamp":"#CCEBC5",
"id":"GCF_000006945.2"},

colorsamp 字段有十六进制颜色代码，所以我尝试这样填充：

// draw circles for each node
    var node = svg.append("g")
        .attr("class","nodes")
        .selectAll("circle")
        .data(graph.nodes)
        // circle
        .enter().append("circle")
        // radius of the circle
        .attr("r", (d) => {
            if (d.choose == 0 ) {return 5;}
            if (d.choose == 1) {return 8;}
        })
        .attr("fill", function(d) { d.colorsamp; })
              .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));
        // add text of mouse over, show name and value (% or raw?)
        node.append("title")
            .text(function(d) { return (d.name+ "\n" + d.lineage + " (" + d.genera +")"); });

除非fill 函数没有用颜色填充节点，否则所有接缝都可以正常工作。

Obs：我正在使用 D3.js v4，因为 v5 无法使用我的代码。

提前致谢

Answer 1

您没有在填充函数中返回colorsamp。

.attr("fill", function(d) { d.colorsamp; })

应该是

.attr("fill", function(d) { return d.colorsamp; })

或者

.style("fill", function(d) { return d.colorsamp; })

如果您不想与 CSS 发生冲突。

const pinkHex = '#E7298A';

const colors = ['#E7298A', 'orange', 'green'];

d3.select('body').append('svg')
  .selectAll('circle')
  .data(colors)
  .enter()
  .append('circle')
  .attr('cx', (d, i) => (i * 50) + 25)
  .attr('cy', (d, i) => (i * 30) + 25)
  .attr('r', 5)
  .attr('fill', (d) => d)

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