D3에 대한 데이터로 연관 배열 사용

나는 매우 간단한 D3 예제를 사용하여 데이터를 연관 배열로 먼저 읽은 다음 막대 그래프로 표시합니다.D3에 대한 데이터로 연관 배열 사용

이 방법을 사용하여 표시 할 항목이없는 것 같습니다. 대신 데이터를 연관 배열로 읽어서 데이터를 간단한 배열로 복사 한 다음 간단한 배열을 사용하여 막대 그래프를 표시합니다.

chart.selectAll("div") 
    .data(genreAssociative) 
    .enter().append("div") 
    .style("width", function(d) { return d * 10 + "px"; }) 
    .text(function(d) { return d; });

위의 코드는 작동하지 않습니다.

genreSimple = []; 
for (var genre in genreAssociative) genreSimple.push(genreAssociative[genre]);   
chart.selectAll("div") 
    .data(genreSimple) 
    .enter().append("div") 
    .style("width", function(d) { return d * 10 + "px"; }) 
    .text(function(d) { return d; });

위의 내용을 참조하십시오. 중개자로서 간단한 배열을 사용합니다. 표준 배열 대신 연관 배열을 반복하는 특별한 방법이 있습니까?

출처

2012-03-06 Crummy

포함 된 정보에서 chart.data 함수가 javascript 객체 (일명 "연관 배열")를 허용하지 않는 것으로 나타납니다. 이 경우 배열로 변환 할 수 밖에 없습니다. – jbabey

JavaScript에서는 연관 배열로 불리지 않습니다. 나는이 용어에 익숙해 져있는 경향이 있습니다. 왜냐하면 보통 연관 배열이 PHP처럼 배열로 선언하기 때문입니다. –

기능 d3.values 또는 d3.entries을 사용하여 연관 배열을 직접 사용할 수 있습니다. 속성을 설정하는 함수 (예 : function(d) { return d.value; })에서이를 고려하기 만하면됩니다.

출처

2012-03-06 18:39:39

이 솔루션은 완전히 작동하지 않았지만 올바른 방향으로 나를 가리켰습니다. ".data (genreAssociative)"를 ".data (d3.values (genreAssociative))"로 바꾸면 데이터가 제대로 표시 될 수 있지만 불행히도 키 정보가 손실됩니다 (키를 텍스트로 표시 할 수 없습니다. 예). – Crummy

'.data (d3.entries (genreAssociative)) '를 사용해 보셨습니까? –

예, 그렇지만 값이 아닌 키에 액세스 할 수 있습니다. 내 막대 그래프에서 막대 길이의 값과 레이블의 키를 원합니다. – Crummy

막 대형 차트 생성이 제대로 작동하려면 다음 형식이 가장 효과적이라는 것을 발견했습니다. 그것은 D3 파싱 된 CSV 형식을 기반으로합니다.

var dataSet1 = [ 
    {xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"}, 
    {xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"}, 
    {xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"}, 
    {xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"}, 
    {xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"}, 
    {xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"}, 
    {xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];

포맷은 서로 좌표, 크기, 범례 및 HTML 링크의 상관을 허용한다.

작동 예제는 http://bl.ocks.org/2164562에서 찾을 수 있습니다.

출처

2012-03-27 02:08:30

D3에 대한 데이터로 연관 배열 사용

답변

관련 문제