क्या मैं छवियों का उपयोग डी 3 ट्रेमैप्स के लिए पृष्ठभूमि आयत के रूप में कर सकता हूं?

Question

क्या प्रत्येक आयताकार की पृष्ठभूमि के साथ डी 3 में एक ट्रेमैप बनाना संभव है? मैं सिल्वरलाइट here में किए गए कुछ के समान कुछ ढूंढ रहा हूं, लेकिन डी 3 के लिए। यदि यह संभव है, तो क्या कोई अनुशंसित ट्यूटोरियल है जो पृष्ठभूमि को पृष्ठभूमि से जोड़ने की प्रक्रिया के माध्यम से चलता है?

Answer 1

हां, एसवीजी में छवियों का उपयोग करने के कई तरीके हैं। आप शायद छवि को पैटर्न के रूप में परिभाषित करना चाहते हैं और फिर आयत को भरने के लिए इसका उपयोग करना चाहते हैं। अधिक जानकारी के लिए, उदा। देखें this question (प्रक्रिया उस तत्व के समान है जो आप भरना चाहते हैं)।

डी 3 कोड में, यह ऐसा कुछ (सरलीकृत) दिखाई देगा।

svg.append("defs") 
    .append("pattern") 
    .attr("id", "bg") 
    .append("image") 
    .attr("xlink:href", "image.jpg"); 

svg.append("rect") 
    .attr("fill", "url(#bg)"); 

Answer 2

यह नोट करना महत्वपूर्ण है कि छवि चौड़ाई की जरूरत है, ऊंचाई विशेषताओं

chart.append("defs") 
        .append('pattern') 
        .attr('id', 'locked2') 
        .attr('patternUnits', 'userSpaceOnUse') 
        .attr('width', 4) 
        .attr('height', 4) 
        .append("image") 
        .attr("xlink:href", "locked.png") 
        .attr('width', 4) 
        .attr('height', 4); 

Answer 3

एक आयत में एक छवि को जोड़ने के लिए अपने दृश्य काफी धीमी गति से कर सकते हैं पैटर्न का उपयोग करना।

आपको लगता है कि बजाय की तरह कुछ कर सकते हैं, इस कोड को मैं एक बल लेआउट में मेरी आयताकार नोड्स के लिए इस्तेमाल किया है, मैं नोड्स के रूप में एक छवि के द्वारा भरा आयतों रखना चाहते थे:

var node = svg.selectAll(".node") 
    .data(force.nodes()) 
    .enter().append("g") 
    .attr("class", "node"); 

node.append("rect") 
    .attr("width", 80) 
    .attr("height", 120) 
    .attr("fill", 'none') 
    .attr("stroke", function (d) { 
     return colors(d.importance); 
    }); 

node.append("image") 
    .attr("xlink:href", function (d) { return d.cover;}) 
    .attr("x", 2) 
    .attr("width", 76) 
    .attr("height", 120) 
    .on('dblclick', showInfo);