Question

我想创建一个带有自定义条形宽度的条形图我尝试按照代码但不知道它是否正确的方法。

另外，我想用新数据更新条形图我该怎么办？

var margin = {
    top: 25,
    right: 40,
    bottom: 35,
    left: 85
  },
  w = 500 - margin.left - margin.right,
  h = 350 - margin.top - margin.bottom;
var padding = 10;

var colors = {
  0: ["Local", "#377EB8"],
  1: ["Global", "#4DAF4A"]
};

var dataset = [{
  "global": 1468604556084,
  "local": 100,
}, {
  "local": 11500,
  "global": 1313048950629
}, {
  "local": 11500,
  "global": 1213048950629
}, {
  "local": 11500,
  "global": 1113048950629
}, {
  "local": 11500,
  "global": 1123048950629
}, {
  "local": 11500,
  "global": 1013048950629
}];

var xScale = d3.scale.ordinal()
  .domain(d3.range(dataset.length))
  .rangeRoundBands([0, w], 0.01);
// ternary operator to determine if global or local has a larger scale
var yScale = d3.scale.linear()
  .domain([0, d3.max(dataset, function(d) {
    return d.local;
  })])
  .range([h, 0]);
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left")
  .ticks(5);


var commaFormat = d3.format(',');

//SVG element
var svg = d3.select("#searchVolume")
  .append("svg")
  .attr("width", w + margin.left + margin.right)
  .attr("height", h + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Graph Bars
var sets = svg.selectAll(".set")
  .data(dataset)
  .enter()
  .append("g")
  .attr("class", "set")
  .attr("transform", function(d, i) {
    return "translate(" + xScale(i) + ",0)";
  });

sets.append("rect")
  .attr("class", "global")
  .attr("width", 20)
  .attr("y", function(d) {
    return yScale(d.local);
  })
  .attr("height", function(d) {
    return h - yScale(d.local);
  })
  .attr("fill", colors[1][1])
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("fill", "red");

// yAxis
svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(0 ,0)")
  .call(yAxis);

  var yTextPadding = 20;

svg.selectAll(".bartext")
.data(dataset)
.enter()
.append("text")
.attr("class", "bartext")
.attr("text-anchor", "middle")
.attr("fill", "black")
.attr("x", function(d,i) {
    console.log(i, xScale(i))
    return xScale(i) + 10;
})
.attr("y", function(d,i) {
    return h + 15;
})
.text(function(d){
     return new Date(d.global).getFullYear();
});
// xAxis label

http://jsfiddle.net/pq0xrard/

Answer 1

逐步回答您的问题 -

rangeRoundBands用于均匀分隔条形图。但是如果你想拥有自定义宽度，那么你就不能像使用它一样使用它。
更新数据，您只需使用enter-update-exit方法，如下所示。

var update_sel = svg.selectAll（＆＃34; circle＆＃34;）。data（data）

update_sel.attr（/ *仅对旧元素进行操作* /）

update_sel.enter（）。append（＆＃34; circle＆＃34;）。attr（/ *对新元素进行操作）   只有* /）

update_sel.attr（/ *对旧元素和新元素进行操作* /）

update_sel.exit（）。remove（）/ *完成enter-update-exit模式   * /

以下是一个完整的示例 - https://jsfiddle.net/seej4dfd/

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
  .range([height, 0]);
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(10, "%");

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

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")

function draw(data) {
  x.domain(data.map(function(d) {
    return d.letter;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.frequency;
  })]);


  var labels = svg
    .selectAll(".topLabel")
  .data(data, function(d) {
      return d.letter;
    });

labels
.exit()
.remove();

labels
  .enter()
  .append("text")
  .attr("class", "topLabel")
  .attr("text-anchor", "middle")
  .attr("fill", "black")

  labels
  .attr("x", function(d, i) {
    return x(d.letter) + 7.5;
  })
  .attr("y", function(d, i) {
    return y(d.frequency);
  })
  .text(function(d, i) {
    return d.letter;
  });


var labels = svg
    .selectAll(".bartext")
  .data(data, function(d) {
      return d.letter;
    });

labels
.exit()
.remove();

labels
  .enter()
  .append("text")
  .attr("class", "bartext")
  .attr("text-anchor", "middle")
  .attr("fill", "black");

  labels
  .attr("x", function(d, i) {
    return x(d.letter) + 7.5;
  })
  .attr("y", function(d, i) {
    return height + 15;
  })
  .text(function(d, i) {
    return d.letter;
  });

  svg.select(".y.axis").transition().duration(300).call(yAxis)

  var bars = svg.selectAll(".bar").data(data, function(d) {
      return d.letter;
    })
  bars.exit()
    .transition()
    .duration(300)
    .remove();

  bars.enter().append("rect")
    .attr("class", "bar");

  bars.transition().duration(300).attr("x", function(d) {
      return x(d.letter);
    })
    .attr("width", 15)
    .attr("y", function(d) {
      return y(d.frequency);
    })
    .attr("height", function(d) {
      return height - y(d.frequency);
    });
}

Answer 2

要更改宽度，请使用xScale.rangeBand()在第73行设置矩形的宽度。

http://jsfiddle.net/073u0ump/3/

d3条形图，具有自定义x轴和条宽

2 个答案: