2

特定の条件を満たしたときに棒グラフに Extra svg:rect を追加しています。動作し、線が表示されます。しかし、バーのすぐ隣に表示されます。そのため、余分な Rect の前後にスペースが必要です。

このコードは機能していません。padding-right を追加しました。また、別の css ファイルで xLine クラスに同じ機能を追加しました。しかし、まだ機能していません。ここで何をすべきですか？

ここに私が追加しているExtra Rectのコードがあります

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-rightsvg の要素に影響を与えず、有効な属性でさえありません (コンテンツが予期せず変更されるため、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 に答える