2

当满足特定条件时，我将额外的 svg:rect 添加到条形图中。它起作用了，并且出现了线条。但它出现在酒吧旁边。所以我需要在那个额外的矩形之前和之后有一些空间。

此代码不起作用。我添加了填充权。还在单独的 css 文件中向 xLine 类添加了相同的功能。但它仍然无法正常工作。我应该在这里做什么？

这是我要附加的额外矩形的代码

var xLine = d3.selectAll(svg).append('rect').data(series.stack.filter(function(d) {
                    return d.y !== null
                })).attr({
                    'width' : 0.4,
                    'height' : 400,
                    'fill' : '#09213a',
                    'padding-right' : '40',
                    'x' : function(d) {
                        return graph.x(a = a + brand_Count[j])
                        },
                    'y' : function(d) {
                        return graph.y(1300)
                    },
                    'class' : 'xLine'
                });
4

2 回答 2

2

SVG 元素是绝对放置的，不会使用填充和边距等自动布局。您可以在需要移动的部分添加transform属性来移动需要移动的部分，也可以使用x, y, width, height属性调整矩形的位置和大小。

padding-right对 svg 中的元素没有影响，甚至不是一个有效的属性（如果 svg 被扩展为具有这样的属性，这可能会导致问题，因为您的内容随后会意外更改）。

于 2013-06-26T10:54:38.407 回答
2

实现这一点的最简单方法是将所需的填充添加到比例返回的值中，例如

var padding = 5;
// more code...
  'x' : function(d) {
    return graph.x(a = a + brand_Count[j]) + padding
  },
于 2013-06-29T18:59:32.037 回答