मैं सिर्फ एक ही मुद्दे में समाप्त हो गया है हो सकता है और एक समाधान है कि मेरे उपयोग फिट बैठता है पाया जाएगा मामला - वाईएमएमवी।
मूल रूप से, मेरी समझ (एनवीडी 3 के स्रोत कोड से) यह है कि आप वास्तव में केवल अलग-अलग बिंदुओं के लिए श्रृंखला के लिए रंग सेट कर सकते हैं: इसलिए मैं आपके उदाहरण में वैसे भी मूल्य वस्तुओं पर color: '#rrggbb' आइटम जोड़ता हूं (सिर्फ इसलिए कि मेरे लिए डेटा संरचना बनाना आसान है), फिर प्रत्येक श्रृंखला का रंग मान इस से सेट करें (मैं underscore.js का उपयोग कर रहा हूं लेकिन आपको इसे शुद्ध जावास्क्रिप्ट में करने में सक्षम होना चाहिए):
final_groups = _.map(groups, function(values, group_id) {
return { key: group_id, color: values[0].color, values: values };
});
यदि आपको बिंदुओं के आधार पर या एक अलग पैमाने का उपयोग करने के बजाय रंगीन निरंतर उपयोग करने की आवश्यकता है, तो मैंने mbostock's advice from this answer का उपयोग किया ताकि डी 3 मेरे लिए रंग मूल्य उत्पन्न कर सके:
function compute_color_on_linear_scale(data, value, colorProperty, colorRange) {
// get a list of all the groups (this works if the colorProperty,
// aka z in your case, is numeric, otherwise the sort function
// needs to be adjusted accordingly)
// In your case, you could just write item.z rather than item[colorProperty]
// if your function doesn't need to be generic, and in that case you can
// omit the colorProperty argument from the argument list altogether
categories = _.uniq(_.map(data, function(item) {
return item[colorProperty];
}).sort(function(a,b){return a - b}), true);
// if no color range was provided, set a default one
if(typeof colorRange === 'undefined') { colorRange = ['red', 'green']; }
// this is mbostock's magic enchantment from his reply linked above
var color = d3.scale.ordinal()
.domain(categories)
.range(d3.range(categories.length).map(d3.scale.linear()
.domain([0, categories.length - 1])
.range(colorRange)
.interpolate(d3.interpolateLab)));
return color(value);
}
यह चाल चलाना चाहिए। मेरा अंतिम स्पर्श पौराणिक कथाओं को छिपाना था क्योंकि इस मामले में ज्यादा समझ नहीं आएगी।
टूलटिप में जेड मान प्रदर्शित करने के लिए, आपको scatterChart() के डिफ़ॉल्ट टूलटिपकंटेंट() फ़ंक्शन को ओवरराइड करने की आवश्यकता है, उदा।
var chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.tooltipContent(function(key, x, y, obj) {
return '<h3>' + obj.point.label + ' (' + key + ')</h3>';
});
आप जरूरत के मुताबिक इस रूप में ज्यादा अनुकूलित कर सकते हैं - अगर आप सिर्फ समारोह की शुरुआत में console.log(arguments); जोड़ने के लिए, आप अपने ब्राउज़र के डेवलपर्स उपकरण में निरीक्षण कर सकते हैं कि वास्तव में कौन डेटा उपलब्ध है आप अपने टूलटिप्स में उपयोग करने के लिए के लिए:
[...]
.tooltipContent(function(key, x, y, obj) {
console.log(arguments);
return '<h3>' + obj.point.label + ' (' + key + ')</h3>';
});