dimple - 在气泡图中按系列着色

Question

我得到了以下数据：

var data = [
    { id: 0, region: 'europe', average_price: 25, product_count: 10 },
    { id: 1, region: 'europe', average_price: 60, product_count: 40 },
    { id: 2, region: 'europe', average_price: 120, product_count: 15 },
    { id: 3, region: 'usa', average_price: 35, product_count: 20 },
    { id: 4, region: 'usa', average_price: 70, product_count: 70 },
    { id: 5, region: 'usa', average_price: 140, product_count: 35 },
    { id: 6, region: 'asia', average_price: 15, product_count: 15 },
    { id: 7, region: 'asia', average_price: 40, product_count: 40 },
    { id: 8, region: 'asia', average_price: 110, product_count: 25 },
];

我想用这个定义画气泡图：

var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "region");
chart.addMeasureAxis("y", "average_price");
chart.addMeasureAxis("z", "product_count");
// chart.addSeries(['region'], dimple.plot.bubble); 
chart.addSeries(['region','id'], dimple.plot.bubble);   
chart.draw();

我的问题是，如果我在 'region' 上添加系列，每个区域的所有数据点都会聚合在一个气泡中。我不希望它们被聚合。我想为每个区域绘制三个气泡。

如果我在 ['region','id'] 上添加系列，气泡是分开的，但每个气泡都有不同的颜色。我想要每个区域一种颜色。

应该很简单...

这是fiddle：https://jsfiddle.net/93vk0c0q/2/

Answer 1

就像你说的那样简单。附上工作代码。

chart.addSeries(['id','region'], dimple.plot.bubble); // interchange

"use strict";

 var svg = dimple.newSvg('.chart-container',"100%","100%");
 var data = [
        { id: 0, region: 'europe', average_price: 25, product_count: 10 },
        { id: 1, region: 'europe', average_price: 60, product_count: 40 },
        { id: 2, region: 'europe', average_price: 120, product_count: 15 },
        { id: 3, region: 'usa', average_price: 35, product_count: 20 },
        { id: 4, region: 'usa', average_price: 70, product_count: 70 },
        { id: 5, region: 'usa', average_price: 140, product_count: 35 },
        { id: 6, region: 'asia', average_price: 15, product_count: 15 },
        { id: 7, region: 'asia', average_price: 40, product_count: 40 },
        { id: 8, region: 'asia', average_price: 110, product_count: 25 },
    ];
 var chart = new dimple.chart(svg, data);
 chart.addCategoryAxis("x", "region");
    chart.addMeasureAxis("y", "average_price");
    chart.addMeasureAxis("z", "product_count"); 
    chart.addSeries(['id','region'], dimple.plot.bubble); 
 chart.draw();
 
 window.addEventListener('resize', function()
 {
  chart.draw(0, true);
 });

.chart-container {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}

svg {
 background: #ddd;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.2.0/dimple.latest.js"></script>
<div class="chart-container"></div>

dimple - 在气泡图中按系列着色

dimple - color by series in bubble chart

data-visualization

d3.js

dimple.js