11

我正在寻找一种限制图表中列宽的方法，我确信这应该相对容易，但我找不到这样做的方法。

我正在根据一些动态数据填充图表，其中列数可能变化很大 - 在 1 到 20 之间。

例如：csv 样本

Location,Col1
"Your house",20

Location,Col1,Col2,Col3,Col4,Col5
"My House",12,5,23,1,5

这工作正常，并且列宽度是动态的，但是当数据中只有一列时，我最终得到一个宽度为 756 的条（整个图表），我不喜欢这种方式。

我想要做的只是有一个最大宽度为 100px 的列，而与数据列的数量无关。

下面是我的图表脚本

非常感谢，

<script>
var margin = {
    top : 40,
    right : 80,
    bottom : 80,
    left : 40
}, 
width = 960 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear().range([ 0, width ]);

var y = d3.scale.linear().range([ height, 0 ]);

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .05);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var chart = d3.select("body").append("svg")
    .attr("class","chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var legendChart = d3.select("body").append("svg")
    .attr("class","chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


d3.csv("/sampledata.csv.txt", function(error, data) {
    // Use the first row of csv for header names 
    var reasonNames = d3.keys(data[0]).filter(function(key) {
        return key !== "Location";
    });
    //console.log(reasonNames);

    data.forEach(function(d) {
        d.reasons = reasonNames.map(function(name) {
            return {
                name : name,
                value : +d[name]
            };
        });
        //console.log(d.reasons);
    });

    x0.domain(data.map(function(d) {return d.Location; }));
    x1.domain(reasonNames).rangeRoundBands([0, x0.rangeBand()]);

    console.log(x0.rangeBand());

    y.domain([0, d3.max(data, function(d) { return d3.max(d.reasons, function(d) { return d.value; }); })]);

    var maxVal = d3.max(data, function(d) { return d3.max(d.reasons, function(d) { return d.value; }); });
    //console.log(maxVal);

    var xAxis = d3.svg.axis()
        .scale(x0)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        //.tickFormat(d3.format(".2s"));

    chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    chart.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    var location = chart.selectAll(".name")
        .data(data)
      .enter().append("g")
        .attr("class", "g")
        .attr("transform", function(d) { return "translate(" + x0(d.Location) + ",0)"; });

    location.selectAll("rect")
        .data(function(d) { return d.reasons; })
      .enter().append("rect")
        .attr("width", x1.rangeBand()-2)
        .attr("x", function(d) { return x1(d.name); })
        .attr("y", function(d) { return y(d.value); })
        .attr("height", function(d) { return height - y(d.value); })
        .style("fill", function(d,i) { return "#"+3+"9"+i; /*color(d.name);*/ });

    chart.selectAll("text")
        .data(data)
      .enter().append("text")
        .attr("x", function(d) { return x1(d.name)+ x.rangeBand() / 2; })
        .attr("y", function(d) { return y(d.value); })
        .attr("dx", -3) // padding-right
        .attr("dy", ".35em") // vertical-align: middle
        .attr("text-anchor", "end") // text-align: right
        .text("String");

    var legend = legendChart.selectAll(".legend")
        .data(reasonNames.slice().reverse())
        .enter()
        .append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")";
    });

    legend.append("rect")
        //.attr("x", width - 18)
        .attr("x", 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", function(d, i) {/*console.log(i);*/return "#" + 3 + "9" + i;
    });

    legend.append("text")
        //.attr("x", width - 24)
        .attr("x", 48)
        .attr("y", 9).attr("dy",".35em")
        //.style("text-anchor", "end")
        //.text(function(d,i) { return String.fromCharCode((65+i))+i; });
        .text(function(d) { return d; });
    });


</script>
4

6 回答 6

13

实现这一目标的最简单方法是更改​​线路

.attr("width", x1.rangeBand()-2)

至

.attr("width", Math.min(x1.rangeBand()-2, 100))

您可能还想调整起始位置和/或填充。

于 2012-12-07T11:11:32.220 回答
7

如果有人卡在其上，则用于调整起始位置的代码：

.attr("x", function(d, i) { return x1(d.seriesName) + (x1.rangeBand() - 100)/2 ;})

PS：参考拉斯的回答。

于 2015-01-14T11:44:37.107 回答
3

为列设置绝对最大宽度不允许正确呈现不同的屏幕分辨率、div 大小等。

就我而言，我只是希望当列数本身很少时列看起来不会那么大我发现通过更改最大宽度（所有列都适合的位置）来使用比例定义更容易、更直接，它们的内部和外部填充。

var w = 600
// var w = parseInt(d3.select(parentID).style('width'), 10) // retrieve the div width dynamically
var inner_padding = 0.1
var outer_padding = 0.8
var xScale = d3.scale.ordinal().rangeRoundBands([0, w], inner_padding, outer_padding)

渲染绘图时，我只运行了一个 switch/if-else 语句，它分配了不同的填充值。要绘制的列数越少，我使用的 outer_padding（最终是内部填充）值就越大。

这样，我保持情节响应。

于 2014-10-30T16:00:15.147 回答
1

为了完整起见，完整的答案如下所示：

svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", (d) -> x1(d.name) + (x1.rangeBand() - d3.min([x1.rangeBand(), 100]))/2)
  .attr("width", d3.min([x1.rangeBand(), 100]))
  .attr("y", (d) -> y(d.grade) )
  .attr("height", (d)-> height - y(d.value) )

（咖啡脚本语法）

请注意，这包括完整答案、“宽度”和“x”设置。当 100 宽度不是最小值时，“x”设置也考虑在内。

于 2015-03-19T02:33:16.183 回答
1

我可以使用上述答案更改条形的宽度。但不幸的是，当图表中有一个条形并且它使用最大宽度集时，我的 X 轴标签没有对齐。

var tradeGroup = svg.selectAll("g.trade")
            .data(trades)
            .enter()
            .append("svg:g")
            .attr("class", "trade")
            .style("fill", function (d, i) {
                return self.color(self.color.domain()[i]);
            })
            .style("stroke", function (d, i) {
                return d3.rgb(self.color(self.color.domain()[i])).darker();
            });

var aWidth = Math.min.apply(null, [x.rangeBand(), 100]);

// Add a rect for each date.
var rect = tradeGroup.selectAll("rect")
            .data(Object)
            .enter()
            .append("svg:rect")
            .attr("x", function (d) {                 
                return x(d.x);
            })
            .attr("y", function (d) { return y( (d.y || 0) + (d.y0 || 0)); })
            .attr("height", function (d) { return y(d.y0 || 0) - y((d.y || 0) + (d.y0 || 0)); })
            .attr("width", Math.min.apply(null, [x.rangeBand(), 100]));
于 2014-04-10T19:09:46.727 回答
0

以为我会分享我对此提出的略有不同的答案。我不想硬编码最大条宽，因为 1）它不响应不同的屏幕尺寸，2）它还需要使用 x 坐标属性或接受一些不规则的间距。

相反，我只是根据条形变得太宽的点设置了最小数量的条形（在我的例子中，我发现少于 12 个条形使我的图表看起来很奇怪）。然后，我按比例调整 scaleBand 的范围属性，如果条数少于该数量。因此，例如，如果最小值设置为 12 并且数据中只有 5 个项目，而不是以全宽的 1/5 呈现每个项目，我将范围缩小到原始宽度的 5/12 .

基本上，是这样的：

// x is a scaleBand() that was previously defined, and this would run on update

var minBarSlots = 12;

if (data.length < minBarSlots) {
    x.range([0, width*(data.length/minBarSlots)])
}
else {
    x.range([0, width])
}`
于 2020-05-22T04:35:29.037 回答