利用JS的D3库实现直方图

来源：互联网发布：rr算法编辑：程序博客网时间：2024/06/05 20:40

D3（Data-Driven Documents）是一个用动态图形显示数据的JavaScript库，一个数据可视化的工具。下面我们用D3 实现了可排序的直方图。

<!DOCTYPE html><meta charset="utf-8"><style>  body {    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;    position: relative;    width: 960px;  }  .axis text {    font: 10px sans-serif;  }  .axis path,  .axis line {    fill: none;    stroke: #000;    shape-rendering: crispEdges;  }  .bar {    fill: steelblue;    fill-opacity: .9;    text-anchor: start;  }  label {    position: absolute;    top: 10px;    right: 10px;  }</style><body><label><input type="checkbox"> Sort values</label><script src="http://d3js.org/d3.v3.min.js"></script><script src="http://code.jquery.com/jquery-latest.min.js"></script><script>  var margin = {top: 50, right: 20, bottom: 30, left: 40},      width = 960 - margin.left - margin.right,      height = 700 - margin.top - margin.bottom;  var x = d3.scale.linear()         .rangeRound([0, width]);  var y = d3.scale.ordinal()          .rangeRoundBands([0, height], .5, .3);  var xAxis = d3.svg.axis()      .scale(x)      .orient("top")  var yAxis = d3.svg.axis()      .scale(y)      .orient("left");  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 + ")");  var data =     [      {"letter" : "A" , "frequency" : 4167},      {"letter" : "B" , "frequency" : 6167},      {"letter" : "C" , "frequency" : 3167},      {"letter" : "D" , "frequency" : 5127},      {"letter" : "E" , "frequency" : 2167},      {"letter" : "F" , "frequency" : 8167},      {"letter" : "G" , "frequency" : 3167},      {"letter" : "H" , "frequency" : 9167}    ];   y.domain(data.map(function(d) { return d.letter; }));   x.domain([0, d3.max(data, function(d) { return d.frequency; })]);  svg.append("g")    .attr("class", "x axis")    .call(xAxis)    .append("text")    .attr("x", width-80)    .attr("dy", ".81em")    .style("font" ,"10px sans-serif")    .style("text-anchor", "begin")    .text("Frequency");  svg.append("g")    .attr("class", "x axis")    .attr("transform", "translate("+0 + ",0)")    .call(xAxis);  svg.append("g")    .attr("class", "y axis")    .attr("transform", "translate(0 ,0)")    .call(yAxis);  svg.selectAll(".bar")    .data(data)    .enter()        .append("rect")    .attr("class", "bar")    .attr("x", 5)    .attr("width",function(d) { return x(d.frequency);})    .attr("y", function(d) { return y(d.letter); })    .attr("height", y.rangeBand())    .on("mouseover", hyper_mouse)    .on("click", hyper);    d3.select("input")    .on("change", change);  var sortTimeout = setTimeout(function() {    d3.select("input").property("checked", false).each(change);  }, 2000);  function hyper(d){    location.href="#";  }  function hyper_mouse(d){    $('.bar').hover(function() {       $(this).css('cursor','pointer');    });  }  function change() {    clearTimeout(sortTimeout);    // Copy-on-write since tweens are evaluated after a delay.    var x0 = y.domain(data.sort(this.checked        ? function(a, b) { return b.frequency - a.frequency; }        : function(a, b) { return d3.ascending(a.letter, b.letter); })        .map(function(d) { return d.letter; }))        .copy();    svg.selectAll(".bar")        .sort(function(a, b) { return x0(a.letter) - x0(b.letter); });    var transition = svg.transition().duration(750),        delay = function(d, i) { return i * 50; };    transition.selectAll(".bar")        .delay(delay)        .attr("y", function(d) { return x0(d.letter); });    transition.select(".y.axis")        .call(yAxis)      .selectAll("g")        .delay(delay);  }</script></body>

D3库利用svg实现图案的渲染，对于矢量化的图形实现有明显的优势。

排序前：

排序后：

0 0