如何select数据值上节点的颜色和工具的数据值作为名称?
How to select the color of node on data value and the Data value of tool as name?
1.How do I select 基于平均值的节点颜色
2.Set 来自 JSON 文件名的工具提示名称格式。因此,悬停时名称应为 "Hello"、"Hello2" 等,并带有各自的 x 和 y 值。
https://jsfiddle.net/npmarkunda/acd0sp05/
var jsonfile = [{
"xvariable": "100",
"valuevariable": "500",
"name": "hello"
}, {
"xvariable": "200",
"valuevariable": "1500",
"name": "hello2"
}, {
"xvariable": "300",
"valuevariable": "3500",
"name": "hello5"
}];
var average = d3.mean(jsonfile.map(function(i) {
return i[1]
}));
console.log(average);
var chart_scatterplot = c3.generate({
point: {
r: 7
},
data: {
json: jsonfile,
keys: {
x: 'xvariable',
value: ['valuevariable'],
name: ['name'],
},
color: function(color, d) {
console.log(d.name)
if (d.value > average) {
return "#F86A52"
} else {
return "#49B5A6"
};
},
type: 'scatter'
},
axis: {
x: {
label: 'Interactions',
tick: {
fit: false
},
min: 1,
max: 50000
},
y: {
label: 'Days',
min: 1,
max: 9000
}
},
legend: {
show: false
},
tooltip: {
format: {
name: function (d) { return d.value; }
}
}
});
你计算平均值的方法是错误的。
而不是像这样计算平均值:
var average = d3.mean(jsonfile.map(function(i) {
return i[1]//this is incorrect its not an array
}));
这样做:
var average = d3.mean(jsonfile.map(function(i) {
return i.valuevariable
}));
对于工具提示,将此配置添加到图表对象
tooltip: {
contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
return jsonfile[d[0].index].name // formatted html as you want
}
},
工作代码here
希望这有帮助!
1.How do I select 基于平均值的节点颜色 2.Set 来自 JSON 文件名的工具提示名称格式。因此,悬停时名称应为 "Hello"、"Hello2" 等,并带有各自的 x 和 y 值。
https://jsfiddle.net/npmarkunda/acd0sp05/
var jsonfile = [{
"xvariable": "100",
"valuevariable": "500",
"name": "hello"
}, {
"xvariable": "200",
"valuevariable": "1500",
"name": "hello2"
}, {
"xvariable": "300",
"valuevariable": "3500",
"name": "hello5"
}];
var average = d3.mean(jsonfile.map(function(i) {
return i[1]
}));
console.log(average);
var chart_scatterplot = c3.generate({
point: {
r: 7
},
data: {
json: jsonfile,
keys: {
x: 'xvariable',
value: ['valuevariable'],
name: ['name'],
},
color: function(color, d) {
console.log(d.name)
if (d.value > average) {
return "#F86A52"
} else {
return "#49B5A6"
};
},
type: 'scatter'
},
axis: {
x: {
label: 'Interactions',
tick: {
fit: false
},
min: 1,
max: 50000
},
y: {
label: 'Days',
min: 1,
max: 9000
}
},
legend: {
show: false
},
tooltip: {
format: {
name: function (d) { return d.value; }
}
}
});
你计算平均值的方法是错误的。
而不是像这样计算平均值:
var average = d3.mean(jsonfile.map(function(i) {
return i[1]//this is incorrect its not an array
}));
这样做:
var average = d3.mean(jsonfile.map(function(i) {
return i.valuevariable
}));
对于工具提示,将此配置添加到图表对象
tooltip: {
contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
return jsonfile[d[0].index].name // formatted html as you want
}
},
工作代码here
希望这有帮助!