js로 색상을 변경하십시오.

컬러 채울

group 요구를

{"name":"Napoleon","group":1},

에서 (. 원의 이미지 그래서에, 내가 볼 수있는 이미지)

.style("fill", function(d) { return color(d.group); })

하지만 group URL에 저장하려면를 어떻게 그것은 html처럼 보일 것입니까?

감사합니다.

출처

2014-04-13 tim

이 [답 (http://stackoverflow.com/questions/19202450/adding -d3-javascript/19204833 # 19204833)에서 도움이 될 수 있습니다. – user1614080

SVG에서 패턴을 사용하여 이미지를 채운 다음 이미지에 링크하십시오. 문서를 '데이터 중심'으로 유지하기 위해 D3의 정신으로 d3에서 패턴을 설정할 수 있습니다 (urls은 사용할 이미지 배열의 배열입니다). 당신이 채우기는 단순히 물론

.attr('fill', function(d, i){return 'url(#my_pattern_'+i+')'})

로 누그러 객체에 속성을 추가로 이미지를 사용하고자 할 때

d3.select('svg') 
    .append('defs') 
     .selectAll('pattern') 
     .data(urls) 
     .enter() 
      .append('pattern') 
       .attr({ 
        'id': function(d, i){return 'my_pattern_' + i;}, 
        'patternUnits':'userSpaceOnUse', 
        'width': dotSize, 
        'height': dotSize 
       }).append('image') 
        .attr({ 
         'xlink:href': function(d){return d;}, 
         'x': 0, 
         'y': 0, 
         'width': dotSize, 
         'height': dotSize 
        })

는 그런 다음에 종료 그룹을 매핑 할 수 있도록하려면 아마 것 관련 패턴 ID는 같은 방법으로 color()을 사용하여 범주 색상을 얻을 수 있습니다. 여기

는 SVG 원 안쪽 북 로고 (래스터 파일) 렌더링 JSFiddle에서의 동작 예이다.

결과 :

Result of SVG pattern applied to circle

소스 이미지 :

The source file

출처

2014-04-14 09:53:22

http://jsfiddle.net/qYD9g/에서 어떻게 작동할까요? – tim

각 그룹의 계획에 자체 아이콘이 있습니까? –

그것은 중요하지 않습니다 :) – tim

js로 색상을 변경하십시오.

답변

관련 문제