d3.js kullanılarak rect için "background: yinelenen-linear-gradyan" stili nasıl uygulanır

Question

D3 kullanarak düzeltme için yinelenen doğrusal gradyan stilini çoğaltma konusunda sorun yaşıyorum.

örn: aşağıdaki div stili var:

.colorbarssegment{ 
    background: repeating-linear-gradient(to right, 
         #c0c0c0, #c0c0c0 4px, 
         #c0c000 4px, #c0c000 8px, 
         #00c0c0 8px, #00c0c0 12px, 
         #00c000 12px, #00c000 16px, 
         #c000c0 16px, #c000c0 20px, 
         #c00000 20px, #c00000 24px, 
         #0000c0 24px, #0000c0 28px); 
} 

div gibi sınıfı kullandığınızda:

benzediğini

<div class="colorbarssegment" style="width: 200px; height: 20px;"></div> 

:

Aynı arpayı nasıl uygularım rectd3.js için le? Neye ihtiyacın olduğu benzer bir modeline sahip bir keman oluşturduk https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

:

Answer 1

this fiddle! Bence bu çözüm ihtiyaç duyduğunuz şeyi yapacak.

<svg width="500" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <linearGradient id="Gradient2" x1="16%" x2="1%" y1="50%" y2="50%"> 
     <stop offset="0%" stop-color="#c0c0c0"/> 
     <stop offset="20%" stop-color="#c0c000"/> 
     <stop offset="40%" stop-color="#c0c000"/> 
     <stop offset="60%" stop-color="#c000c0"/> 
     <stop offset="80%" stop-color="#c00000"/> 
     <stop offset="100%" stop-color="#0000c0"/> 
     </linearGradient> 
     <linearGradient id="repeat"xlink:href="#Gradient2"spreadMethod="repeat" /> 
     <style type="text/css"><![CDATA[ 
     #rect1 { fill: url(#repeat); } 
     .stop1 { stop-color: #c0c0c0; } 
     .stop2 { stop-color: #c0c000; } 
     .stop3 { stop-color: #c0c000; } 
     .stop4 { stop-color: #c000c0; } 
     .stop5 { stop-color: #c00000; } 
     .stop6 { stop-color: #0000c0; } 
     ]]></style> 
    </defs> 

    <rect id="rect1" x="10" y="10" rx="15" ry="15" width="120" height="30"/> 

Answer 2

Bu sayfada anlatıldığı şekilde SVG bir desen tanımlamak zorunda kalacak Bundan sonra http://jsfiddle.net/11k570ud/

, Eğer rect özelliğini verir:

fill="url(#yourPatternID)" 

ya svg kodunda bu dahil etmek veya D3.js. ile ekleyebilirsiniz Bunun nasıl yapılacağı ile ilgili bir açıklama here bulunabilir (bu yazı Gradyanları kullanır, ancak Desenler çok benzer şekilde çalışır).