d3.js折線圖與條形圖

Question

我在條形圖工作：http://bl.ocks.org/Caged/6476579在d3.js

我想有說條形圖的組合，並添加一行圖表相同的數據。

bl.ocks中的所有線圖示例都有很大不同。

我該如何做到這一點？

Answer 1

可能你可以使用c3.js這是一個基於D3的可重用圖表庫。

這裏是你正在尋找一個例子： Combination Chart

你可以結合「酒吧」，「花」，「行」，「區域」等。

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

希望這有助於！