डी 3 ब्रश का आकार बदलें

Question

क्या ब्रश होना संभव है जो एक स्थिर चौड़ाई यानी एक ब्रश है जो आकार बदलने योग्य नहीं है? इसे अभी भी खींचने योग्य होने की आवश्यकता होगी। प्रतीत होता है कि यह दस्तावेज में संभव है या नहीं।

Answer 1

उस के लिए कोई स्पष्ट विकल्प नहीं है, लेकिन तुम सब करने की जरूरत है ब्रश ईवेंट हैंडलर में डोमेन रीसेट है, उदाहरण के

var brush = d3.svg.brush().on("brush", brushed); 

function brushed() { 
    brush.extent(desiredDomain); 
} 

Answer 2

आकार आकार बदलने छुपा से रोका जा सकता सीएसएस के माध्यम से हैंडल

के लिए

g.brush>.resize { 
    display: none; 
} 

Answer 3

वास्तव में, सीमा को मैन्युअल रूप से रीसेट करने से अच्छी तरह से काम नहीं लगता है।

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

// Create the brush normally. 
var brush = d3.svg.brush() 
    .x(xScale) 
    .on("brush", brushed); 

// Add it to a SVG group 
var slider = context.append("g") 
    .attr("class", "x brush") 
    .call(brush); 

// Remove the resize control 
slider.selectAll(".resize").remove(); 

Answer 4

मैं बिल्कुल एक ही समस्या का सामना करना पड़ा। मैं डी 3 4.0 का उपयोग कर रहा था और एक्स अक्ष के साथ एक निश्चित आकार ब्रश को लागू करने की आवश्यकता है। मैं इस लक्ष्य को हासिल करने के लिए .brush अंदर drag.filter() समारोह और संशोधित तत्वों का इस्तेमाल किया:

var brush = d3.brushX() 
      .filter(function() {return d3.mouse(this)[0] > brushStart && d3.mouse(this)[0] < brushStart + brushWidth}) 
      .extent([[0, 0], [width, height]]) 
      .on("end", brushended) 
      .on('brush', beingBrushed); 
svg.append('g') 
    .attr('class', 'brush') 
    .call(brush) 
    .call(brush.move, [0, brushWidth]); //initial position 
d3.selectAll('.brush>.handle').remove(); 

function brushended() { 
    var s = d3.event.selection; 
    if (s!== null) { 
     brushStart = s[0]; 
    } 
} 

इस तरह ब्रश खींच लेकिन आकार बदलने नहीं देता है।

Answer 5

D3.js v4.0 में आप एसवीजी तत्वों (आयताकार संभाल) के लिए सीएसएस में सूचक घटनाओं को अक्षम कर सकते हैं।

.handle { 
 
    pointer-events: none; 
 
}