>

요소가 일련의 차트 속성 인 JSON 목록이 있습니다. D3과 billboard.js를 사용하여 HTML div 목록을 동적으로 생성하고 싶습니다.  각 요소에는 하나의 차트가 포함됩니다. 설정은이 피들 에 표시됩니다. 차트가 표시되는 동안 Error: <g> attribute transform: Trailing garbage, "translate(0,NaN)". 와 같은 여러 D3 오류가 발생합니다.  그리고 billboard.js 차트에는 이상한 [object Object] 가 있습니다  축 옆에 문자열이 나타납니다. 예를 들어 이름이 div 인 수동으로 만든 경우 이러한 오류가 나타나지 않습니다.  HTML에 요소를 추가 한 다음 billboard.js 차트를 이에 바인딩했습니다.


  • 답변 # 1

    차트 DOM 요소에 바인딩 된 데이터로 인해 문제가 발생합니다. 바인딩 된 데이터 만 삭제하면 문제가 해결됩니다.

    d3.select(this).datum(null); 만 추가  반복 블록에. 스 니펫을 실행 한 결과를 확인하십시오.

    var cdata = [
    	{
    		title: "Chart1",
    		data: {
    			columns: [
    				["data1", 10, 20, 30],
    				["data2", 50, 20, 10]
    			]
    		}
    	},
    	{
    		title: "Chart2",
    		data: {
    			columns: [
    				["data1", 10, 20, 30],
    				["data2", 50, 20, 10]
    			]
    		}
    	}
    ];
    d3.select("#container").selectAll("div")
        .data(cdata)
        .enter()
        .append("div")
        .style("width", 200)
        .style("height", 200)
        .each(function(d) {
            // remove data set on DOM element
        	d3.select(this).datum(null);
            bb.generate({
    	        data: d.data,
    	        title: { text: d.title },
    	        bindto: this
            });
    });
    
    
    <!doctype html>
    <html>
    <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
      <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
    </head>
    <body>
      <div id="container"></div>
    </body>
    </html>
    
    

  • 이전 javascript - cytoscapejs 레이아웃 복합 노드
  • 다음 android - recyclerview 위에 버튼을 추가하는 방법