更改d3.js条形图矩形大小

莫阿德

我正在使用d3.js制作水平条形图,并且无法更改条形图矩形的大小。对于我想做的事情,它们太大了。这是一个屏幕截图,因为JSFiddle不会显示图表(数据在我的本地驱动器上)。这是我的代码:

var m = [40, 20, 10, 145], //TRBL
    w = 400 - m[1] - m[3], //margin.right - margin.left
    h = 400 - m[0] - m[2]; //margin.top - margin.bottom

var format = d3.format(",.0f");

var x = d3.scale.linear().range([0, w]),
    y = d3.scale.ordinal().rangeRoundBands([0, h], .2);

var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-10),
    yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);

var cause = d3.select("#cause").append("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")")

d3.csv("data/cause.csv", function(data) {

  // Parse numbers, and sort by value.
  data.forEach(function(d) { d.number = +d.number; });
  data.sort(function(a, b) { return b.number - a.number; });

  // Set the scale domain.
  x.domain([0, 350]);
  y.domain(data.map(function(d) { return d.cause; }));

var bar = cause.selectAll("g.bar")
      .data(data)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(0," + y(d.cause) + ")"; });

  bar.append("rect")
      .attr("width", function(d) { return x(d.number); })
      .attr("height", y.rangeBand());

  bar.append("text")
      .attr("class", "number")
      .attr("x", function(d) { return x(d.number); })
      .attr("y", y.rangeBand() / 2)
      .attr("dx", 3) //Number position
      .attr("dy", ".35em") //Position in the rect
      .attr("text-anchor", "start")
      .text(function(d) { return format(d.number); });

  cause.append("g")
      .attr("class", "x axis")
      .call(xAxis);

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

  cause.append("text") //Y AXIS TEXT
    .attr("class", "y label")
    .attr("x", w / 3)
    .attr("dy", "-1.5em")
    .text("Cause of Deaths")
    .style("font-size","13px");        
});

我是d3 noobie。请让我知道是否还有其他不正确的地方。

联合发现

看来您想更改h变量,对不对?

在这里使用它:

bar.append("rect")
      .attr("width", function(d) { return x(d.number); })
      .attr("height", y.rangeBand());

定义每个钢筋的高度。

所以说:

var m = [40, 20, 10, 145], //TRBL
    w = 400 - m[1] - m[3], //margin.right - margin.left
    h = 400 - m[0] - m[2]; //margin.top - margin.bottom

将该400更改为较小值。它还将被计入您的y价值。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

更改d3.js条形图矩形大小

来自分类Dev

如何在分组的条形图d3js v4中减小矩形大小

来自分类Dev

调整d3.js条形图的大小

来自分类Dev

调整d3.js条形图的大小

来自分类Dev

更改 d3 条形图的“填充”

来自分类Dev

使用d3 js的水平条形图

来自分类Dev

d3中条形图的轴和矩形刻度线的刻度未对齐

来自分类Dev

D3 条形图镜像

来自分类Dev

D3.js:动态更改条形图

来自分类Dev

D3.js-如何在放大分组的条形图时裁剪矩形外部的区域

来自分类Dev

D3.js-如何在放大分组的条形图时裁剪矩形外部的区域

来自分类Dev

如何动态更改条形图(dc.js)中的bin大小?

来自分类Dev

条形图的条形图之间的d3js网格线

来自分类Dev

D3.js水平条形图-更改条形方向(从左到右,而不是从右到左)

来自分类Dev

d3 js 圆形条形图,如何传递对象而不是 .csv 文件?

来自分类Dev

D3带时间的堆积条形图

来自分类Dev

带D3的堆积条形图

来自分类Dev

缩放D3中堆积的条形图?

来自分类Dev

JavaScript,D3条形图错误

来自分类Dev

条形图的d3转换相反

来自分类Dev

D3水平条形图的精确副本

来自分类Dev

d3过渡堆积条形图

来自分类Dev

D3 条形图轴怪癖

来自分类Dev

D3 - 堆积条形图,位置条

来自分类Dev

D3条形图到堆积条形图

来自分类Dev

在d3.js中平移条形图

来自分类Dev

在d3js中创建基本的条形图

来自分类Dev

排序d3.js堆积的条形图

来自分类Dev

尝试更新d3.js中的条形图