गुम मूल्यों के साथ मल्टी सीरीज़ चार्ट (डी 3)

Question

मैं इस example के आधार पर डी 3 के साथ एक बहु श्रृंखला रेखा चार्ट बनाना चाहता हूं। मेरी समस्या है, लापता मूल्यों के कुछ कर रहे हैं:

y x1 x2 x3 
1 0.8  0.7 
2 0.9  0.7 
3 0.9 1.2 0.7 
4  1.1 0.7 
5 0.8 1.1 2.7 
6 0.9 1.2 2.6 
7  1.3 0.8 

मैं निम्नलिखित चार्ट प्राप्त करना चाहते हैं:

शुरुआत या अंत में गुम अंक बाहर छोड़ दिया जाना चाहिए। मैं

d3.svg.line().defined(function (d) { return d.value; } 

लेकिन यदि कुछ बिंदु रेखा के भीतर गायब हैं, तो लाइन को बाधित नहीं किया जाना चाहिए। हरे रंग की रेखा (x1) के ऊपर वाले कोड के साथ वाई = 3 पर बंद हो जाता है और y = 5 पर जारी रहता है। लेकिन मैं उन बिंदुओं को जोड़ना चाहता हूं।

line().defined() के उपयोग के बिना, सभी लापता बिंदुओं को संभाला गया जैसे कि उनका मान 0 था।

http://jsfiddle.net/G5z4N/2/

मुझे लगता है कि यह कोई समाधान मुझे यह करने के लिए पारित करने से पहले डेटा सरणी में लापता अंक स्थानापन्न करने के लिए है:

यहाँ कोड है, मैं उस सुविधा को लागू करने के लिए एक रास्ता खोजने के लिए इस्तेमाल किया मेरे चार्ट काम करते हैं, क्योंकि मुझे एक किंवदंती और टूलटिप्स में मान दिखाना है और मैं यहां गणना मूल्यों को नहीं दिखा सकता। तो उदाहरण के लिए यदि मैं y = 4 पर माउस के साथ चलता हूं, तो पौराणिक कथाओं में x1:-- x2:1.1 x3:0.8 दिखाई दे सकता है (x1 के पास कोई मान नहीं है)। इसके अलावा (असली) अंक मंडलियों के रूप में प्रदर्शित किया जाना चाहिए। मैं स्मृति में दो डेटा टेबल नहीं चाहता (वास्तविक माप डेटा वाला एक और चार्ट लाइनों के लिए संवर्धित डेटा वाला दूसरा)।

Answer 1

मैं इसे हल कर सकता हूं, लेकिन मुझे यकीन नहीं है कि क्या मैं संक्रमण के साथ डेटा अपडेट को संभाल सकता हूं। मैं बदल डेटा थोड़ा स्वरूपित और अब प्रत्येक पंक्ति अलग ड्राइंग हूँ:

http://jsfiddle.net/G5z4N/3/

var data = [ 
    { 
     name: "x1", 
     color: "green", 
     data: [ 
      [1, 0.8], 
      [2, 0.9], 
      [3, 0.9], 
      [5, 0.8], 
      [6, 0.9] 
     ] 
    }, 
    { 
     name: "x2", 
     color: "red", 
     data: [ 
      [3, 1.2], 
      [4, 1.1], 
      [5, 1.1], 
      [6, 1.2], 
      [7, 1.3] 
     ] 
    }, 
    { 
     name: "x3", 
     color: "blue", 
     data: [ 
      [1, 0.7], 
      [2, 0.7], 
      [3, 0.7], 
      [4, 0.7], 
      [5, 2.7], 
      [6, 2.6], 
      [7, 0.8] 
     ] 
    }, 
]; 

var margin = [20, 20, 20, 20]; 
var w = 400 - margin[1] - margin[3]; 
var h = 300 - margin[0] - margin[2]; 

var x = d3.time.scale().range([0, w]); 
var y = d3.scale.linear().range([h, 0]); 
var lineFunction = d3.svg.line() 
    .x(function(d) { return x(d[0]); }) 
    .y(function(d) { return y(d[1]); }); 

graph = d3.select('#line') 
    .append("svg:svg") 
     .attr("class", "line-graph") 
     .attr("width", w + margin[1] + margin[3]) 
     .attr("height", h + margin[0] + margin[2]) 
    .append("svg:g") 
     .attr("transform", "translate(" + margin[3] + "," + margin[0] + ")"); 

x.domain([ 
    d3.min(data, function(c) { return d3.min(c.data, function(v) { return v[0]; }); }), 
    d3.max(data, function(c) { return d3.max(c.data, function(v) { return v[0]; }); }) 
]); 

y.domain([ 
    d3.min(data, function(c) { return d3.min(c.data, function(v) { return +v[1]; }); }), 
    d3.max(data, function(c) { return d3.max(c.data, function(v) { return +v[1]; }); }) 
]); 

var linesGroup = graph 
    .append("svg:g") 
     .attr("class", "lines"); 

var linedata; 
for (var i in data) { 
    linedata = data[i]; 
    linesGroup 
     .append("path") 
      .attr("d", lineFunction(linedata.data)) 
      .attr("class", "line") 
      .attr("fill", "none") 
      .attr("stroke", function(d, i) { 
       console.log(linedata.color); 
       return linedata.color; 
      }); 
};