मैं अपनी लाइन d3.js चार्ट लाइन टूल टिप पर अपनी csv फ़ाइल के तापमान और टाइमस्टैम्प कॉलम के तहत डेटा प्रदर्शित करने का प्रयास कर रहा था। मैं चाहता हूं कि संबंधित दिन और तापमान टूलटिप पर प्रदर्शित हो

यह वह त्रुटि है जो मुझे कंसोल से मिल रही है "अनकॉट टाइप एरर: एसवीजीपाथ एलीमेंट पर अपरिभाषित की संपत्ति 'टाइमस्टैम्प' नहीं पढ़ सकता। (इंडेक्स.जेएस: 70) एसवीजीपाथ एलिमेंट पर। (डी3.वी5.जेएस: 2)"

Div.html(formatTime((d.timestamp)) + "
" + (+d.temperature))

मुझे उम्मीद है कि दिनांक और तापमान टूलटिप पर प्रदर्शित होना चाहिए

let svg = d3.select('svg'),
  height = +svg.attr('height'),
  width = +svg.attr('width');
  let formatTime = d3.timeFormat("%m/%d/%Y");

const render = data => {
  const title = 'Engagements Over-Time(Total: 946K)';
  const xValue = d => d.timestamp;

  const yValue = d => d.temperature;

  const margin = {top: 60, right: 60, bottom: 88, left: 105};
  const innerwidth = width - margin.left - margin.right;
  const innerheight = height - margin.top - margin.bottom;
  
  const xScale = d3.scaleTime()
  	.domain(d3.extent(data, xValue))
    .range([0, innerwidth - 150])
  	.nice();
  
	const yScale = d3.scaleLinear()
  	.domain([0, d3.max(data, d => d.temperature)])
  	.range([innerheight, 0])
  	.nice();
    
  const g = svg.append('g')
  	.attr('transform', `translate(${margin.left}, ${margin.top+30})`);
    
    let parseDate = d3.timeFormat("%m/%d/%Y");
    const xAxis = d3.axisBottom(xScale)
                .tickFormat(parseDate)
                .tickPadding(5)

                
    // Define the div for the tooltip
  let div = d3.select("body").append("div")	
      .attr("class", "tooltip")				
      .style("opacity", 0)
      .style("display", "null");;

  let yAxisTicFormat = number => d3.format('.1s')(number)
  const yAxis = d3.axisLeft(yScale)
              .tickPadding(35)
              .tickFormat(yAxisTicFormat)
  ;

  const yAxisG = g.append('g').call(yAxis);
  yAxisG.selectAll('.domain').remove();
  
  const xAxisG = g.append('g').call(xAxis)
  	.attr('transform', `translate(0, ${innerheight})`);

  xAxisG.select('.domain').remove();
  
  const lineGenerator = d3.line()
  	.x(d => xScale(xValue(d)))
  	.y(d => yScale(yValue(d)))
  	.curve(d3.curveBasis);
 	 
  g.append('path')
  	.attr('class', 'line-path')
    .attr('d', lineGenerator(data))
    .on("mouseover", function(d) {
       div.transition() 
       .duration(500) 
       .style("opacity", 1)
       .style("display", "block");
       console.log(xValue);

       div.html(formatTime((d.timestamp)) + "<br/>" + (+d.temperature)) 
       .style("left", (d3.event.pageX-1) + "px") 
       .style("top", (d3.event.pageY - 28) + "px"); 
      }) 
      
       .on("mouseout", function(d) {
        div.transition() 
        .duration(500) 
        .style("opacity", 0); });;
  
  g.append('text')
  	.attr('class', 'title')
    .attr('y', -40)
    .text(title);

};

d3.csv('temperature-in-san-francisco.csv').then(data =>{
  //console.log(data)
    data.forEach(d => {
        d.timestamp =new Date (d.timestamp);
        d.temperature = +d.temperature*1000;
     
    });


    render(data);
    //console.log(data)
        
})

मेरी जानकारी

टाइमस्टैम्प, तापमान

2007-04-23,93.24

2007-04-24,95.35

2007-04-25,98.84

२००७-०४-२६,९९.९२

1
Mayor 1 सितंबर 2019, 18:17

1 उत्तर

सबसे बढ़िया उत्तर

ऐसा लगता है कि आपको लगता है कि माउसओवर ईवेंट पर एक अलग डेटा बिंदु लौटाया जाएगा, इस पर निर्भर करता है कि कर्सर किस रेखा को छू रहा है, लेकिन यह ध्यान रखना महत्वपूर्ण है कि वह रेखा पथ परिभाषा स्ट्रिंग द्वारा परिभाषित केवल एक svg तत्व है।

आपका डेटा सरणी लाइन जनरेटर को पास कर दिया गया था जिसने लाइन को परिभाषित करने वाली एक स्ट्रिंग लौटा दी थी, जिसे पथ की d (परिभाषा के लिए डेटा नहीं (शायद)) संपत्ति के रूप में सेट किया गया था। एक svg path तत्व बनाया गया है, लेकिन इसके लिए कोई डेटा बाध्य नहीं किया गया है।

तो इसका कारण

div.html(formatTime((d.timestamp))

संदर्भ त्रुटि फेंक रहा है कि कोई डेटा path तत्व से बाध्य नहीं है, इसलिए कॉलबैक का पहला पैरामीटर (डी) undefined लौटा रहा है।

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

सर्कल के माउसओवर पर टूलटिप दिखाने के कई तरीके हैं इस SO पोस्ट पर< /ए>. लार्स कोथॉफ द्वारा सुझाया गया सबसे सरल लगता है, जिसे माउसओवर श्रोता की आवश्यकता नहीं है, बल्कि इसके बजाय ब्राउज़र की अंतर्निहित कार्यक्षमता का उपयोग करता है जहां यह एक तत्व का शीर्षक ऑन-होवर दिखाता है (यह लार के उदाहरण से है):

d3.selectAll("circle")
.data(data)
.enter()
  .append("svg:circle")
  .attr('cx', d => xScale(d.timestamp))
  .attr('cy', d => yScale(d.temperature))
  .attr('r', 3)
  .attr('fill', 'steelblue')
  .append("svg:title")
  .text(function(d) { return d.x; });
1
lemming 1 सितंबर 2019, 20:56