我很擅长这个 . 我正在尝试了解如何使用DC.js库开发气泡图 . 我使用DC.js库的原因是因为我的所有其他行图都是交叉过滤的 . 如果我在行图中选择任何条形图,我希望它也可以交叉过滤泡泡图表 .
目前我正在尝试开发泡沫图表,但它不起作用 . 它显示不正常 . 我注意到大多数直流气泡图都使用了x和y轴的测量值 . 对于我的情况,我需要使用文本而不是整数或日期等 . 这是一个示例数据:
var data = [
{Failure: "test1", topic: "a", count: "2"},
{Failure: "test1", topic: "b", count: "2"},
{Failure: "test1", topic: "c", count: "95"},
{Failure: "test1", topic: "c", count: "2"},
{Failure: "test2", topic: "a", count: "75"},
{Failure: "test2", topic: "b", count: "2"},
{Failure: "test2", topic: "c", count: "10"},
{Failure: "test2", topic: "a", count: "2"},
{Failure: "test3", topic: "a", count: "51"},
{Failure: "test3", topic: "b", count: "40"},
{Failure: "test3", topic: "c", count: "20"},
{Failure: "test3", topic: "b", count: "15"}
];
当我创建一个气泡图时,我希望Failure列是X轴,它将显示“Test1,Test2,Test3”和y轴,显示“a,b,c” . 计数列将是气泡的大小 . 所以我可以查看一个泡泡,即test3和主题C的计数 .
这在dc.bubblechart中是否可行?因为我在示例中看到的所有x和y轴都是数字或日期的范围 .
到目前为止,这是我的代码,用于开发此气泡图 . 这是我能做的最好的......
var failure= ndx.dimension(function(d) {return d.failure;});
var topic= ndx.dimension(function(d) {return d.topic;});
var bubbleChart = dc.bubbleChart("#bubble-chart");
//debugger;
bubbleChart
.dimension(failure)
.group(dateGroup)
.x(d3.scale.ordinal().domain(failure))
.y(d3.scale.ordinal().domain(topic))
.width(400)
.height(400)
.yAxisPadding(50)
.xAxisPadding(50)
.xAxisLabel('X') // (optional) render an axis label below the x axis
.yAxisLabel('Y') // (optional) render a vertical axis lable left of the y axis
.renderLabel(true)
.title(function (p) {
return [
"Failure: " + p.value.Failure,
"Topic: " + p.value.topic,
"count: " + p.value.count,
]
.join("\n");
})
.renderTitle(true)
.renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false
.renderVerticalGridLines(true)
.maxBubbleRelativeSize(0.3)
.keyAccessor(function (p) {
return p.value.Failure;
})
.valueAccessor(function (p) {
return p.value.topic;
})
.radiusValueAccessor(function (p) {
return p.value.count;
})
.elasticRadius(true)
.elasticY(true)
.elasticX(true);
1 回答
我切换到热图,它的功能与我预期的一样!客户喜欢它=)感谢@Gordon的建议
我使用了DC.js中提供的热图 . 交叉滤波在两个方面都有效 .