9
पर एनवीडी 3 एकाधिक एक्सिस बरचार्ट ओवरलैपिंग बार्स एनवीडी 3 का उपयोग कर एकाधिक एक्सिस ब्रैचर्ट ड्राइंग। मेरी समस्या यह है कि बार ओवरलैपिंग कर रहे हैं। वाई-अक्ष पर चार्ट में बाईं तरफ और दूसरी तरफ दाईं तरफ है।ड्राइविंग
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart1, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body class='with-3d-shadow with-transitions'>
<div id="chart1" >
<svg> </svg>
</div>
<script>
// var testdata = stream_layers(9,10+Math.random()*100,.1).map(function(data, i) {
// return {
// key: 'Stream' + i,
// values: data.map(function(a){a.y = a.y * (i <= 100 ? 100 : 1); return a})
// };
// });
var testdata=[{"key":"stream1", "values": [
{
"x": 0,
"y": 44
},
{
"x": 1,
"y": 10
},
{
"x": 2,
"y": 29
},
{
"x": 3,
"y": 88
},
{
"x": 4,
"y": 25
},
{
"x": 5,
"y": 32
},
{
"x": 6,
"y": 100
},
{
"x": 7,
"y": 52
},
{
"x": 8,
"y": 15
},
{
"x": 9,
"y": 78
},
{
"x": 10,
"y": 42
},
{
"x": 11,
"y": 108
},
{
"x": 12,
"y": 17
},
{
"x": 13,
"y": 23
},
{
"x": 14,
"y": 182
},
{
"x": 15,
"y": 9
},
{
"x": 16,
"y": 25
},
{
"x": 17,
"y": 90
},
{
"x": 18,
"y": 32
},
{
"x": 19,
"y": 138
},
{
"x": 20,
"y": 189
},
{
"x": 21,
"y": 3
},
{
"x": 22,
"y": 16
},
{
"x": 23,
"y": 66
},
{
"x": 24,
"y": 46
},
{
"x": 25,
"y": 27
},
{
"x": 26,
"y": 185
},
{
"x": 27,
"y": 13
},
{
"x": 28,
"y": 12
},
{
"x": 29,
"y": 71
},
{
"x": 30,
"y": 191
}
]},
{"key":"stream2","values":[
{
"x": 0,
"y": 1.1
},
{
"x": 1,
"y": 0.5
},
{
"x": 2,
"y": 2.1
},
{
"x": 3,
"y": 1.5
},
{
"x": 4,
"y": 1.7
},
{
"x": 5,
"y": 2.1
},
{
"x": 6,
"y": 0.75
},
{
"x": 7,
"y": 1.75
},
{
"x": 8,
"y": 1
},
{
"x": 9,
"y": 2.3
},
{
"x": 10,
"y": 2
},
{
"x": 11,
"y": 0.5
},
{
"x": 12,
"y": 1.6
},
{
"x": 13,
"y": 1.8
},
{
"x": 14,
"y": 2.35
},
{
"x": 15,
"y": 2.4
},
{
"x": 16,
"y": 1.8
},
{
"x": 17,
"y": 1
},
{
"x": 18,
"y": 1.25
},
{
"x": 19,
"y": 1.85
},
{
"x": 20,
"y": 0.65
},
{
"x": 21,
"y": 0.75
},
{
"x": 22,
"y": 1.25
},
{
"x": 23,
"y": 2.25
},
{
"x": 24,
"y": 0.5
},
{
"x": 25,
"y": 1.85
},
{
"x": 26,
"y": 1.75
},
{
"x": 27,
"y": 1.15
},
{
"x": 28,
"y": 1.9
},
{
"x": 29,
"y": 2.4
},
{
"x": 30,
"y": 1.5
}
]}];
testdata[0].type = "bar";
testdata[0].yAxis = 1;
testdata[1].type = "bar";
testdata[1].yAxis = 2;
console.log(testdata);
nv.addGraph(function() {
var chart = nv.models.multiChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.color(d3.scale.category10().range())
.height(450)
.width(1200)
.color(d3.scale.category10().range())
.useInteractiveGuideline(true)
.interpolate('linear');
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis1.tickFormat(d3.format(',.1f'));
chart.yAxis2.tickFormat(d3.format(',.1f'));
d3.select('#chart1 svg')
.datum(testdata)
.transition().duration(500).call(chart);
return chart;
});
</script>
</body>
</html>
एक Plunkr इस के लिए सेटअप embededhere पाया जा सकता है।
बहु ग्राफ को आकर्षित करने के लिए डेटा का दो सेट लेकिन बार ओवरलैपिंग कर रहे हैं। माई आउट पॉट स्क्रीन शॉट यहाँ है।
करने के लिए केवल एक चीज चौड़ाई और सलाखों के स्थिति को समायोजित करने के लिए है। जब मैं
testdata[1].yAxis = 1;
यह सही काम करता है के लिए अक्ष स्विच उन वर्ग
d3.selectAll ('.bars1Wrap .nv-groups .nv-series-0 rect')
से चयन कर रहे हैं। 
लेकिन समस्या खोए गए डेटा की सीमा है। मुझे दो डेटासेट के लिए अलग-अलग रेंज की आवश्यकता है।
मैं की तरह
var g3 = d3.selectAll ('.bars1Wrap .nv-groups .nv-series-0 rect')
.attr("width", function(d){ return d/2;});
लेकिन कोई सफलता ... किसी भी मदद की सराहना की चार्ट
ड्राइंग के बाद सलाखों के चौड़ाई समायोजित करने की कोशिश की।
अग्रिम धन्यवाद एक महान समाधान के लिए। कोड पर एक और समस्या मैंने पाया कि यदि मैं एक किंवदंती को बंद करता हूं तो बार अपनी पूरी चौड़ाई में आना चाहिए। मेरी स्थिति में भी चार्ट खींचने के बाद मैं दूसरा फ़ंक्शन नहीं कॉल कर सकता हूं। वैसे भी मैं इस काम को करने के लिए एनवीडी 3 कोड संशोधित करूंगा। अंतिम समाधान खोजने के लिए दिशा की दिशा में मुझे मार्गदर्शन करने के लिए धन्यवाद। मुझे उम्मीद है कि यह जवाब दूसरों के लिए भी उपयोगी होगा। –
कृपया मेरा संपादित उत्तर देखें, मेरा कोड अब बार पूर्ण चौड़ाई बनाता है, जब किंवदंती बंद होती है। – Cyril