D3.js 在y轴上有条件地定位标签

我有一个带正负值的水平条形图。当值为正值时，我想将y轴上的标签定位到轴的左侧，当值为负值时，将标签定位到轴的右侧

{value: -70, dataset:"foo"},
{value: -20, dataset:"bar"},
{value: 30, dataset:"baz"}
etc...

第一个条的值为负值，标签

foo

位于轴的右侧，这就是我想要它的位置。但是第三个条的值是正值，所以我希望看到y轴左侧的标签。这可能吗

下面是JSFIDLE:

一个简单的解决方案（很多解决方案中的一个）是调用两个轴生成器，

axisLeft

和

axisRight

，并根据数据集值格式化刻度：

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + x(0) + ",0)")
    .call(d3.axisRight(y).tickFormat(function(d) {
        var value = data.filter(function(e) {
            return e.dataset === d
        })[0].value;
        return value > 0 ? null : d;
    }));

svg.append("g")
    .attr("class", "y axis left")
    .attr("transform", "translate(" + x(0) + ",0)")
    .call(d3.axisLeft(y).tickFormat(function(d) {
        var value = data.filter(function(e) {
            return e.dataset === d
        })[0].value;
        return value < 0 ? null : d;
    }));

一个简单的解决方案（众多解决方案中的一个）是调用两个轴生成器，

axisLeft

和

axisRight

，并根据数据集值格式化记号：

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + x(0) + ",0)")
    .call(d3.axisRight(y).tickFormat(function(d) {
        var value = data.filter(function(e) {
            return e.dataset === d
        })[0].value;
        return value > 0 ? null : d;
    }));

svg.append("g")
    .attr("class", "y axis left")
    .attr("transform", "translate(" + x(0) + ",0)")
    .call(d3.axisLeft(y).tickFormat(function(d) {
        var value = data.filter(function(e) {
            return e.dataset === d
        })[0].value;
        return value < 0 ? null : d;
    }));

---

@user1608142如果使用这种方法，请记住删除其中一个轴的路径，否则会有两行，一行在另一行上。如果将属性添加到数据数组中的对象，例如“description”，是否可以将这些属性作为标签添加到y轴，并与页面最左侧对齐，或者连接到数据集值？由于这是一个不同的问题，请发布另一个问题。至于删除一个轴的路径，这是正确的方法吗：在调用语句末尾添加.select（“path.line”）。remove@user1608142如果使用此方法，请记住删除其中一个轴的路径，否则，您将有两行，一行在另一行上。如果将属性添加到数据数组中的对象，例如“description”，是否可以将这些属性作为标签添加到y轴，对齐到页面最左侧，或者可能连接到数据集值？因为这是一个不同的问题，请发布另一个问题。至于删除其中一个轴的路径，这是正确的方法吗：在call语句的末尾添加。选择（“path.line”）。删除