Question

我正在制作一个条形图：d3.js中的http://bl.ocks.org/Caged/6476579

我希望对所述条形图进行组合，并为相同的数据添加折线图。

bl.ocks中的所有折线图示例都非常不同。

我如何实现这一目标？

Answer 1

可能您可以使用 c3.js 库，这是一个基于D3的可重复使用的图表库。

这是您正在寻找的示例： Combination Chart

你可以组合'bar'，'spline'，'line'，'area'等。

Answer 2

首先需要创建一个这样的选择框：

  <select>
    <option id="bar">bar</option>
    <option selected="selected" id="line">line</option>
  </select>

创建一个函数来制作ajax并根据选择选项加载图形：

function getMyData() {
      d3.tsv("data.tsv", type, function(error, data) {
        x.domain(data.map(function(d) {
          return d.letter;
        }));
        y.domain([0, d3.max(data, function(d) {
          return d.frequency;
        })]);
        //check select for the option
        if (d3.select("select").node().value == "line") {
          showLineChart(data);//make line chart
        } else {
          showBarChart(data);//make bar chart
        }
      });
    }

制作折线图的功能：

function showLineChart(data) {
  svg.selectAll("*").remove();
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

  svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);

}

制作条形图的功能：

function showBarChart(data) {
  svg.selectAll("*").remove();
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

  svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
      return x(d.letter);
    })
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
      return y(d.frequency);
    })
    .attr("height", function(d) {
      return height - y(d.frequency);
    })
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)
}

工作代码here

希望这有帮助！

d3.js带有条形图的折线图

2 个答案: