d3.js v4

Question

में एसिंह (व्यस्त हाइपरबॉलिक साइन) स्केल बनाना यह लॉग स्केल के लिए एक प्रतिस्थापन होगा ताकि यह नकारात्मक संख्याओं से निपट सके। कस्टम स्केल के कई उदाहरण नहीं देखे हैं हालांकि मैं डी 3 के लॉगरिदमिक स्केल के स्रोत को शुरुआती बिंदु के रूप में उपयोग करने का प्रयास कर रहा हूं।

Answer 1

प्रलेखन में सबसे अच्छा उदाहरण एक पैमाने की इंटरपोलेट विशेषता प्रतीत होता है। https://github.com/d3/d3-scale/blob/master/README.md#continuous-scales

var color = d3.scaleLinear() 
    .domain([10, 100]) 
    .range(["brown", "steelblue"]) 
    .interpolate(d3.interpolateHcl); 

देखें मैं वास्तव में एक d3 विशेषज्ञ नहीं हूँ इसलिए मुझे आशा है कि मदद करता है।

Answer 2

जहां तक ​​मुझे पता है कि डी 3 में कस्टम स्केल बनाने के कोई तरीके नहीं हैं (कम से कम उस अर्थ में नहीं जिसे आप ढूंढ रहे हैं)। सभी डी 3 तराजू दो चरणों में बड़े पैमाने:

1. डोमेन का उपयोग कर, इनपुट एक deinterpolation समारोह
2. रेंज का उपयोग कर दिया deinterpolate, उत्पादन

मैं प्राप्त करने के लिए चरण 1 से मध्यवर्ती परिणाम अंतर्वेशन मानते हैं आपका आदर्श उत्तर मूल रूप से प्रश्न का उत्तर देगा, "मैं एक कस्टम फ़ंक्शन में डी 3 स्केल का डिंटरटरपॉलेशन फ़ंक्शन कैसे सेट करूं?", और मुझे नहीं लगता कि यह वर्तमान में संभव है।

हालांकि, आप इंटरपोलेट फ़ंक्शन सेट कर सकते हैं। माइक Bostock से इस उदाहरण प्रक्षेप डी 3 की आसानी कार्यों में बनाया में से एक का उपयोग कर सेट करने के लिए कैसे पता चलता है: http://bl.ocks.org/mbostock/56ea94205411ee9e4dbec3742f7ad08c

उदाहरण थोड़े एक "फ़िशआई लेंस" प्रभाव है, जो शायद आप क्या चाहते हैं के विपरीत है है। आप लॉग स्केलिंग के करीब कुछ पाने के लिए एक से कम एक्सपोनेंट के साथ बहुपद easing फ़ंक्शन, d3.easePolyInOut का उपयोग कर सकते हैं (मेरा कोड स्निपेट देखें)। दुर्भाग्यवश, कोई "लॉग इनऑट" या "asinhInOut" नहीं है, इसलिए यदि आपको एक कठोर रोलऑफ (बहुपद से अधिक) की आवश्यकता है, तो आपको अपना स्वयं का आसान/इंटरपोलेशन फ़ंक्शन लिखना होगा।

var data = Array.from(Array(21), (_,i)=>{return 10*(i-10)}) 
 

 
var svg = d3.select("svg"), 
 
    margin = {top: 50, right: 20, bottom: 5, left: 20}, 
 
    width = svg.attr("width") - margin.left - margin.right, 
 
    height = svg.attr("height") - margin.top - margin.bottom, 
 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var polyexp = 0.25 
 

 
var x = d3.scaleLinear() 
 
    .domain([-100,100]) 
 
    .range([0, width]) 
 
    .interpolate(easeInterpolate(d3.easePolyInOut.exponent(polyexp))); 
 

 
g.append("g") 
 
    .attr("class", "axis axis--x") 
 
    .call(d3.axisBottom(x)); 
 

 
g.selectAll("circle").data(data).enter().append("circle") 
 
    .attr("cx", (d) => x(d)) 
 
    .attr("cy", -10) 
 
    .attr("r", 3) 
 
    .attr("fill", "steelblue") 
 

 
function easeInterpolate(ease) { 
 
    return function(a, b) { 
 
    var i = d3.interpolate(a, b); 
 
    return function(t) { 
 
     return i(ease(t)); 
 
    }; 
 
    }; 
 
}

.axis text { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script> 
 
<svg width="600" height="100"></svg>