Блог

Я пытаюсь заполнить свой узел 3D.js hexdecimal цветом из json . Итак, вот пример 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 что они не работают с моим кодом.

Заранее спасибо

Вы не возвращаете значение 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>