使用d3.js在x轴上构建带有分组类别的散点图

Question

我正在寻找在x轴上构建带有分组类别的散点图。我之前使用highcharts.js构建了这种类型的绘图，并且这样的绘图的示例是here。是否可以用d3.js构建这种类型的散点图？我在小提琴here中有一个正常的d3散点图，它有一个简单的数据对象，可以通过'tier'和'price'变量在x轴上分组。有没有人用d3在x轴上构建一个包含多个变量的散点图？非常感谢任何帮助，谢谢！

示例数据对象：

var chocolates = [{
    "name": "Dairy Milk",
    "manufacturer": "cadbury",
    "tier": 4,
    "price": 45,
    "rating": 2
}, {
    "name": "Galaxy",
    "manufacturer": "Nestle",
    "tier": 2,
    "price": 42,
    "rating": 3
}, {
    "name": "Lindt",
    "manufacturer": "Lindt",
    "tier": 1,
    "price": 80,
    "rating": 4
}, {
    "name": "Hershey",
    "manufacturer": "Hershey",
    "tier": 5,
    "price": 40,
    "rating": 1
}, {
    "name": "Dolfin",
    "manufacturer": "Lindt",
    "tier": 1,
    "price": 90,
    "rating": 5
}, {
    "name": "Bournville",
    "manufacturer": "cadbury",
    "tier": 4,
    "price": 70,
    "rating": 2
}];