d3

Question

में एक त्रिकोण ड्राइंग का मुहावरेदार तरह से मैं निम्नलिखित कोड d3 में एक त्रिकोण खींचता है कि है:

var trianglePoints = xScale(3) + ' ' + yScale(18) + ', ' + xScale(1) + ' ' + yScale(0) + ', ' + xScale(12) + ' ' + yScale(3) + ' ' + xScale(12) + ', ' + yScale(3) + ' ' + xScale(3) + ' ' + yScale(18); 

console.log(trianglePoints); 

svg.append('polyline') 
    .attr('points', trianglePoints) 
    .style('stroke', 'blue'); 

यहाँ एक jsbin जो यह कार्रवाई में पता चलता है।

मुझे यह जानकर उत्सुकता है कि क्या यह इस डी 3 में करने का सबसे अच्छा तरीका है या क्या कोई बेहतर तरीका है?

Answer 1

माइक Bostock, डी 3 के निर्माता, सोचता है कि क्या आप कर रहे हैं सबसे अच्छा तरीका है: https://groups.google.com/forum/#!topic/d3-js/kHONjIWjAA0

हाँ, मैं शायद एक कस्टम "डी" के साथ एक पथ तत्व का उपयोग करें यहां विशेषता ।

त्रिभुज ड्राइंग के लिए एक और विकल्प, लेकिन स्कैटरप्लॉट्स के लिए अधिक उद्देश्य, d3.svg.symbol का उपयोग करना है। दस्तावेज़ यहां देखें:

https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-symbol

Answer 2

वहाँ Scatterplots में उपयोग के लिए विभिन्न प्रतीकों ड्राइंग के लिए एक inbuilt convenience function, के रूप में केली आर द्वारा कहा गया है कि आप केवल एक समभुज त्रिकोण ड्राइंग में रुचि रखते हैं है, तो यह हो सकता है उपयोग किया गया।

समारोह इतना की तरह इस्तेमाल किया जा सकता है:

svg.append("path") 
    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }) 
    .attr("d", d3.svg.symbol().type("triangle-up")); 

तुम भी प्रतीक के आकार को निर्धारित कर सकते हैं: समारोह कॉल size(100) जोड़कर।

ने कहा कि यही कारण है कि अगर आप त्रिकोण का एक अलग रूप आप या तो आकर्षित करने के लिए करना चाहते हैं:

1. एक path तत्व आकर्षित और d विशेषता का उपयोग। Path element explained।
2. polygon या polylinepoints विशेषता के साथ ड्रा करें (जैसा कि आपने अपने उदाहरण में किया है)।

d विशेषता का उपयोग करने के लिए। मैंने इसे JS Bin को डेमो करने के लिए फोर्क किया है। कुंजी टुकड़ा इस प्रकार है के रूप में:

svg.append('path') 
    .attr('d', function(d) { 
     var x = xScale(3), y = yScale(18); 
     return 'M ' + x +' '+ y + ' l ' + xScale(10) + ' ' + yScale(10) + ' l ' + -xScale(10) + ' ' + yScale(20) + ' z'; 
    }) 
    .style('stroke', 'blue'); 

Answer 3

एक और उदाहरण shape symbols की v4 का उपयोग कर:

var color = "green"; 
var triangleSize = 25; 
var verticalTransform = midHeight + Math.sqrt(triangleSize); 

var triangle = d3.symbol() 
      .type(d3.symbolTriangle) 
      .size(triangleSize) 
; 

svg.append("path") 
      .attr("d", triangle) 
      .attr("stroke", color) 
      .attr("fill", color) 
      .attr("transform", function(d) { return "translate(" + xScale(currentPrice) + "," + yScale(verticalTransform) + ")"; }); 
    ; 

कुछ नोट:

• आकार के आकार एक क्षेत्र
• हो रहा है आकार [0, 0]

पर केंद्रित है

उपर्युक्त उदाहरण केंद्र की बजाय समतुल्य त्रिकोण के शीर्ष बिंदु का अनुवाद करने की कोशिश कर रहा है, इसलिए ट्रांसफॉर्म के "वाई" हिस्से में अतिरिक्त राशि।