>

for 루프를 사용하여 팩 레이아웃에 대한 데이터를 동적으로 작성하고 있습니다. 원의 색상이 무작위로 지정되고 싶습니다. 내 코드는 fill 속성에 대한 실제 함수를 반환합니다.

<circle cx="532.0508075688773" cy="219.6152422706632" r="46.41016151377546" fill="function () {
                    return "hsl(" + Math.random() * 360 +",100%,50%)"
                    }" name="1"></circle>

필 속성으로 전달되는 함수의 반환을 위해 코드를 어떻게 변경합니까?

데이터가 루트 노드를 만드는 데 사용하는 방법의 관련 부분

...
for (var j=0;j<10;j++){
    child = {}; 
    child["name"]= +j;
    child["value"]=2;
    child["fill"]=function() {
        return "hsl(" + Math.random() * 360 + ",100%,50%)";
        };
...

이것은 내가 원을 만드는 방법입니다

d3.select('svg g')
    .selectAll('circle')
    .data(rootNode.descendants())
    .enter()
    .append('circle')
    ...
    .attr('fill', function(d) { return d.data.fill; })


  • 답변 # 1

    기능을 노드의 데이텀으로 설정하는 대신 ...

    child["fill"] = function() {
        return "hsl(" + Math.random() * 360 + ", 100%, 50%)";
    };
    
    

    ... 그냥 값 자체를 설정하십시오 :

    child["fill"] = "hsl(" + Math.random() * 360 + ", 100%, 50%)";
    
    

    동일한 원칙을 따르는 기본 데모입니다 :

    var svg = d3.select("svg")
    var data = [{
      name: "foo",
      fill: "hsl(" + Math.random() * 360 + ",100%,50%)"
    }, {
      name: "bar",
      fill: "hsl(" + Math.random() * 360 + ",100%,50%)"
    }, {
      name: "baz",
      fill: "hsl(" + Math.random() * 360 + ",100%,50%)"
    }];
    var circles = svg.selectAll(null)
      .data(data)
      .enter()
      .append("circle")
      .attr("cy", 50)
      .attr("r", 40)
      .attr("cx", function(_, i) {
        return 50 + 100 * i
      })
      .style("fill", function(d) {
        return d.fill
      })
    
    
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <svg></svg>
    
    

    그러나 저장 기능 ( Math.random() )은  데이터의 기능이 우수함 (또는 표준)이 아닙니다.

    그 대신에 가벼움과 채도를 저장하지 않는 이유는 무엇입니까? 그런 다음 Math.random() 를 사용할 수 있습니다  콜백에서 직접 :

    .style("fill", function(d) {
        return "hsl(" + Math.random() * 360 + "," + d.saturation + "," + d.lightness + ")"
    })
    
    

    다음은 데모입니다 :

    var svg = d3.select("svg")
    var data = [{
      name: "foo",
      saturation: "100%",
      lightness: "50%"
    }, {
      name: "bar",
      saturation: "40%",
      lightness: "30%"
    }, {
      name: "baz",
      saturation: "100%",
      lightness: "80%"
    }];
    var circles = svg.selectAll(null)
      .data(data)
      .enter()
      .append("circle")
      .attr("cy", 50)
      .attr("r", 20)
      .attr("cx", function(_, i) {
        return 50 + 50 * i
      })
      .style("fill", function(d) {
        return "hsl(" + Math.random() * 360 + "," + d.saturation + "," + d.lightness + ")"
      })
    
    
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <svg></svg>
    
    

관련 자료

  • 이전 svelte - 최상위 주사?
  • 다음 java - 버튼의 OnClickListener를 여러 번 호출