d3.js: समय के पैमाने

मैं d3 के साथ एक समय रेखा दृश्य जहां डोमेन कई दशकों के लिए कुछ दिनों के से भिन्न हो सकते हैं का निर्माण कर रहा हूँ से टिक प्रारूप मिलता है। मैं एक d3 समय के पैमाने और अक्ष का उपयोग कर रहा इस तरह:d3.js: समय के पैमाने

var timeScale = d3.time.scale() 
    .domain([firstEvent, lastEvent]) 
    .range([leftPadding, w - rightPadding]); 
var timeAxis = d3.svg.axis() 
    .scale(timeScale) 
    .orient("bottom"); 
timeAxis.ticks(5);

के बाद से डोमेन इसलिए चर रहा है, यह ticks(x) जो स्वचालित रूप से टिक प्रारूप का चयन करेंगे उपयोग करने के लिए सुविधाजनक है। मेरी समस्या यह है कि कुछ मामलों में, वर्ष नहीं दिखाया जाता है, जो महत्वपूर्ण है। मेरा विचार धुरी के निर्माण के बाद टिक प्रारूप की जांच करना था, और यदि इसमें एक वर्ष नहीं है, तो इसे धुरी के बगल में मैन्युअल रूप से दिखाएं। हालांकि, मैं पैमाने का टिक प्रारूप प्राप्त करने में सक्षम नहीं हूं; timeScale.tickFormat() का उपयोग करके बस एक फ़ंक्शन देता है। इस समस्या का समाधान किस प्रकार से किया जा सकता है?

स्रोत

2015-12-16 speedymcs

आप टिक स्थानों प्राप्त करने के लिए() 'किसी भी तर्क के बिना .ticks' कॉल कर सकते हैं। –

@LarsKotthoff हां, लेकिन '.ticks()' अनौपचारिक स्थान लौटाता है, इसलिए कोई यह नहीं बता सकता कि वर्ष उनके लेबल में से किसी भी लेबल में प्रदर्शित किया जाएगा या नहीं। – speedymcs

कैसे एक सरल regex परीक्षण के बारे में?

var hasYear = false; 
var re = /^\d{4}$/; 
// get the ticks text  
d3.selectAll('.x>.tick>text').each(function(d){ 
    // does the text look like a year? 
    var txt = this.textContent; 
    if (re.test(txt)){ 
    hasYear = true; 
    } 
}); 
console.log(hasYear);

इस नमूना कोड का इस्तेमाल किया और विभिन्न पर्वतमाला के साथ चारों ओर खेला:

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 

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

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

 
</style> 
 
<body> 
 
<script src="//d3js.org/d3.v3.min.js"></script> 
 
<script> 
 

 
var margin = {top: 250, right: 40, bottom: 250, left: 40}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var x = d3.time.scale() 
 
    .domain([new Date(2013, 12, 2), new Date(2013, 12, 6)]) 
 
    .range([0, width]); 
 

 
var xAxis = d3.svg.axis() 
 
    .scale(x) 
 
    .ticks(5); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 
    
 
xAxis.ticks().some(function(d){ 
 
    return /^\d{4}$/.exec("3434") 
 
}) 
 

 
var hasYear = false; 
 
var re = /^\d{4}$/; 
 
d3.selectAll('.x>.tick>text').each(function(d){ 
 
    var txt = this.textContent; 
 
    if (re.test(txt)){ 
 
    hasYear = true; 
 
    } 
 
}); 
 
console.log(hasYear); 
 

 

 
</script>

स्रोत

2015-12-16 01:23:24 Mark

अच्छी तरह से काम करने लगता है - बहुत बहुत धन्यवाद! चयन के बारे में अधिक जानने की आवश्यकता है ... – speedymcs

डी 3 के समय की जाँच करता है कि क्या स्वरूपण टिक पर प्रदर्शित दिनांक से किसी पर है अक्ष मध्यरात्रि, जनवरी का पहला वर्ष केवल वर्ष प्रदर्शित करने के लिए। दोनों ही मामलों here के लिए

function isYear(t) { 
    return +t == +(new Date(t.getFullYear(), 0, 1, 0, 0, 0, 0)); 
} 
var ticks = timeScale.ticks(); 
var willDisplayYear = ticks.some(isYear);

पूरा डेमो: आप देख सकते हैं कि एक पूर्ण वर्ष टिक रही और उसके बाद जाँच इस हालत से प्रदर्शित किया जाएगा।

स्रोत

2015-12-16 03:35:47

आपके उत्तर के लिए धन्यवाद, लार्स। क्या आपके पास समय अक्ष का निर्णय लेने का तरीका है कि वर्ष प्रदर्शित होता है या नहीं? यह मेरे लिए बहुत ही असंभव लगता है, मुझे लगता है कि यह सिर्फ धुरी की सीमा पर निर्भर करता है। कोड मुझे एक त्रुटि देता है - 't.getFullYear' एक फ़ंक्शन नहीं है। जाहिर है इसे डेट ऑब्जेक्ट से कॉल करने की आवश्यकता है। मैंने पहले एक बनाया: var date = new date (t); नई तारीख (+ टी) == नई तारीख (date.getFullYear(), 0, 0, 0, 0, 0, 0); कोड 'झूठी' देता है भले ही एक वर्ष टिक में मौजूद है। मैंने मार्क के जवाब को सही के रूप में चिह्नित किया है क्योंकि यह किसी भी तरह से एक मजबूत समाधान की तरह लगता है। – speedymcs

आह आप सही हैं - आपको इसके लिए पैमाने का उपयोग करने की आवश्यकता है। मैं जवाब ठीक कर दूंगा। –

यह अभी भी 'झूठी 'लौटाता है, भले ही टिक लेबल में पूर्ण वर्ष हों। समय क्षेत्र के साथ करना पड़ सकता है। – speedymcs

d3.js: समय के पैमाने

उत्तर

संबंधित मुद्दे