Membuat carta baris dan bar mudah menggunakan d3.js

Artikel ini dibina pada tutorial sebelumnya mengenai carta gelembung menggunakan D3.js, perpustakaan JavaScript untuk visualisasi data. Kami kini akan meneroka carta baris dan bar dengan D3.js, memanfaatkan HTML, SVG, dan CSS. Kebiasaan dengan artikel sebelumnya disyorkan. Takeaways utama termasuk pemahaman D3.js peranan dalam visualisasi interaktif, mekanik penciptaan carta garis (skala, paksi, penjana baris), pembinaan carta bar (skala ordinal, segi empat tepat), dan meningkatkan pengalaman pengguna melalui interaktiviti (alat -alat, pengendali acara, peralihan, peralihan ). Pilihan penyesuaian, seperti skala paksi dan gaya, juga diserlahkan.

carta baris: Panduan langkah demi langkah

Contoh kami menggunakan dataset berikut:

var lineData = [{x: 1, y: 5}, {x: 20, y: 20}, {x: 40, y: 10}, {x: 60, y: 40}, {x: 80, y: 5}, {x: 100, y: 60}];

dan elemen SVG:

<svg id="visualisation" width="1000" height="500"></svg>

Kami menentukan skala, paksi, dan margin:

var vis = d3.select('#visualisation'),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {top: 20, right: 20, bottom: 20, left: 50},
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) { return d.x; }), d3.max(lineData, function(d) { return d.x; })]),
    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) { return d.y; }), d3.max(lineData, function(d) { return d.y; })]),
    xAxis = d3.svg.axis().scale(xRange).tickSize(5).tickSubdivide(true),
    yAxis = d3.svg.axis().scale(yRange).tickSize(5).orient('left').tickSubdivide(true);

vis.append('svg:g').attr('class', 'x axis').attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')').call(xAxis);
vis.append('svg:g').attr('class', 'y axis').attr('transform', 'translate(' + (MARGINS.left) + ',0)').call(yAxis);

fungsi penjana baris kemudian dibuat:

var lineFunc = d3.svg.line()
  .x(function(d) { return xRange(d.x); })
  .y(function(d) { return yRange(d.y); })
  .interpolate('linear');

Akhirnya, garis dilampirkan ke SVG:

vis.append('svg:path')
  .attr('d', lineFunc(lineData))
  .attr('stroke', 'blue')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

carta bar: Membina di atas asas

Untuk carta bar, kami menggunakan semula penciptaan paksi tetapi mengubah suai skala dan menambah segi empat tepat:

function InitChart() {
  // ... (barData remains the same as lineData, for simplicity) ...
  var xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function(d) { return d.x; }));
  var yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, d3.max(barData, function(d) { return d.y; })]);
  // ... (xAxis and yAxis remain the same) ...

  vis.selectAll('rect')
    .data(barData)
    .enter()
    .append('rect')
    .attr('x', function(d) { return xRange(d.x); })
    .attr('y', function(d) { return yRange(d.y); })
    .attr('width', xRange.rangeBand())
    .attr('height', function(d) { return ((HEIGHT - MARGINS.bottom) - yRange(d.y)); })
    .attr('fill', 'grey')
    .on('mouseover', function(d) { d3.select(this).attr('fill', 'blue'); })
    .on('mouseout', function(d) { d3.select(this).attr('fill', 'grey'); });
}

InitChart();

Contoh yang dipertingkatkan ini termasuk pengendali acara tetikus dan tetikus untuk interaktiviti. Penyesuaian selanjutnya dan teknik canggih mungkin dengan D3.js, yang membolehkan visualisasi data yang sangat disesuaikan dan dinamik. Seksyen FAQ yang disediakan menawarkan panduan lanjut mengenai menambah label, alat tool, responsif, animasi, penyortiran, tajuk, legenda, dan mengendalikan data yang hilang.

Atas ialah kandungan terperinci Membuat carta baris dan bar mudah menggunakan d3.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!