D3.js 具有变量X和Y的D3条形图（条形图的可变宽度和高度）

我正在尝试绘制一个条形图，其中基于json数据的条形图具有可变宽度（基于json中的权重字段）和高度（基于json中的频率字段）

目前，我得到了一些结果，但酒吧之间有一些差距。看来我对X或宽度的计算是错的

有人能给我指出正确的方向吗

数据如下所示

var data = [{
        "letter": "A",
        "Weight": 10,
        "frequency": 60,
        "xPos": 2.5
    },
    {
        "letter": "B",
        "Weight": 10,
        "frequency": 25,
        "xPos": 15
    },
    {
        "letter": "C",
        "Weight": 20,
        "frequency": 55,
        "xPos": 40
    }
];

我有一个相同的代码笔下面

---

由于您需要知道当前条目的权重（宽度）以及之前所有条目的权重之和（偏移量），因此饼图布局似乎非常适合任务（因为它为切片提供了开始和结束角度）。您所需要做的就是将角度映射到宽度

正文{边距：0；位置：固定；顶部：0；右侧：0；底部：0；左侧：0；}
//您可以随意更改或删除在此编辑器中看到的任何代码！
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，500）
.attr（“高度”，200）
风险值数据=[{
频率：60，
体重：10
}, {
频率：25，
体重：10
}, {
频率：55，
体重：20
}];
var xScale=d3.scaleLinear（）
.domain（[0，Math.PI*2]）
.范围（[0，500]）；
var yScale=d3.scaleLinear（）
.domain（[0,80]）
.范围（[200,0]）；
var pie=d3.pie（）
.sortValues（空）
.value（函数（d）{返回d.weight；}）；
var调整数据=pie（数据）；
var rects=svg.selectAll（'rect'）
.数据（调整数据）；
rects.enter（）
.append（'rect'）
.style（'填充'，'蓝色'）
.style（'笔划'，'黑色'）
.merge（rects）
.attr（'x'，函数（d）{返回xScale（d.startAngle）；}）
.attr（'width'，函数（d）{返回xScale（d.endAngle）-xScale（d.startAngle）；}）
.attr（'y'，函数（d）{返回yScale（d.data.freq）；}）
.attr（'height'，函数（d）{返回yScale（0）-yScale（d.data.freq）；}）；

不清楚您试图实现的目标——您将两个XPO作为一个领域，但似乎还想从重量比例到整体来计算XPO？@CoderinoJavarino xPos实际上不是数据的一部分。我计算它是因为我找不到如何将重量比例到整体。你翻译bar-g，然后给bar-rect一个

x

，当正x轴向左时，您的

文本
元素为空？