CSVカラーデータがレンダリングされない

Question

私は、.csvデータ、 "COLOR"列ごとに円を描こうとしています。 "COLOR" は今の色は...ただ、デフォルトの黒...

var col = function(d) {return d.COLOR}; 

svg.selectAll(".dot") 
     .data(data) 
    .enter().append("circle") 
     .attr("class", "dot") 
     .attr("r", 15) 
     .attr("cx", xMap) 
     .attr("cy", yMap) 
     .style("fill", col) 
     .style("opacity", ".5") 
     .on("mouseover", function(d) { 
      tooltip.transition() 
       .duration(200) 
       .style("opacity", .9); 
      tooltip.html(d["Cereal Name"] + "<br/> (" + xValue(d) 
      + ", " + yValue(d) + ")") 
       .style("left", (d3.event.pageX + 5) + "px") 
       .style("top", (d3.event.pageY - 28) + "px"); 

data.forEach(function(d) { 
    d.POPULATION = +d.POPULATION; 
    d.REVENUE = +d.REVENUE; 
    d.COLOR = +d.COLOR; 

を転送していない - しかし、 "赤" "黄"、 "緑" を含み

Answer 1

お客様のCOLORの値には、dataの解析された文字列の一部となる引用符"が含まれています。したがって、有効でないfill=""yellow""のような属性値で終わります。したがって、黒のデフォルトカラー。

これを回避する方法の1つは、CSV自体の引用符を取り除くことです。これが不可能な場合は、次のように自分の色アクセサ機能colを調整することがあります

var col = function(d) {return d.COLOR.substring(1, d.COLOR.length - 1)}; 

は、この作業のデモを見てください：

var data = [{ COLOR: '"yellow"'}]; 
 

 
var col = function(d) { return d.COLOR.substring(1, d.COLOR.length - 1); }; 
 

 
d3.select("body").append("svg") 
 
    .selectAll("circle") 
 
    .data(data) 
 
    .enter().append("circle") 
 
    .attr("cx", 100) 
 
    .attr("cy", 100) 
 
    .attr("r", 10) 
 
    .attr("fill", col);

<script src="https://d3js.org/d3.v4.js"></script>