D3.js 进入d3中顺序刻度轴的点之间

我很难找到给定X尺度域之间的点。 例如，我有一个条形图，其X轴值为

[Bob,Robin,Anne,Mark,Joe,Eve,Karen,Kirsty,Chris,Lisa,Tom,Stacy,Charles,Mary]

上面的值用于绘制x轴。由于这些值是离散的，所以我使用了缩放方法

  var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
  x.domain(data.map(function(d) { return d.salesperson; })); 

我的目标是在给定点的x刻度之间找到点，即 有没有办法在

Bob，Robin

或

Robin，Anne

之间找到一个点，这样我就可以在给定Y轴值的情况下绘制一个点

我添加了一个条形图，该条形图具有所述的x轴。我需要在图表上绘制一个点，该点的x值点位于

Bob，Robin

---

Y值为

30（Y轴上的任何值）

如果

Robin

是紧跟在

Bob

之后的离散值，则可以使用

bandwidth（）

和

step（）

的组合：

很难看，但很管用。谈到丑陋，如果你想要一个更丑陋的数学，你也可以结合使用

step（）

和

paddingner（）

：

这是一个演示，我将重点放在

y（10）

上，这样您可以更好地看到它将位于“Bob”和“Robin”条之间：

var margin={top:20，right:20，bottom:30，left:40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//设定范围
var x=d3.scaleBand（）
.范围（[0，宽度]）
.填充（0.1）；
变量y=d3.scaleLinear（）
.范围（[高度，0]）；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
风险值数据=[
{
“销售人员”：“鲍勃”，
“销售”：33
},
{
“销售员”：“罗宾”，
“销售”：12
},
{
“销售员”：“安妮”，
“销售”：41
},
{
“销售人员”：“马克”，
“销售”：16
},
{
“销售员”：“乔”，
“销售”：59
},
{
“销售员”：“夏娃”，
“销售”：38
},
{
“销售员”：“凯伦”，
“销售”：21
},
{
“销售人员”：“Kirsty”，
“销售”：25
},
{
“销售员”：“克里斯”，
“销售”：30
},
{
“销售人员”：“丽莎”，
“销售”：47
},
{
“售货员”：“汤姆”，
“销售”：5
},
{
“销售人员”：“Stacy”，
“销售”：20
},
{
“推销员”：“查尔斯”，
“销售”：13
},
{
“售货员”：“玛丽”，
“销售”：29
}
];
//格式化数据
data.forEach（函数（d）{
d、 销售额=+d.销售额；
});
//缩放域中数据的范围
x、 域（data.map（函数（d）{returnd.salessorn；}））；
y、 域（[0，d3.max（数据，函数（d）{return d.sales；}）]）；
//为条形图添加矩形
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{return x（d.salesperson）；}）
.attr（“宽度”，x.带宽（））
.attr（“y”，函数（d）{返回y（d.sales）；}）
.attr（“高度”，函数（d）{返回高度-y（d.sales）；}）；
//添加x轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加y轴
svg.append（“g”）
.调用（d3.左（y））；
var pointBetween=svg.append（“圆”）
.attr（“r”，2）
.attr（“cy”，y（10））
.attr（“cx”，x（“Bob”）+x.bandwidth（）+（x.step（）-x.bandwidth（））/2）

.bar{fill:steelblue；}

x("Bob") + x.bandwidth() + (x.step()-x.bandwidth()) / 2

x("Bob") + x.step() * (1 - x.paddingInner() / 2))