D3水平条形图

Question

我是d3.js的新手，正在尝试制作水平条形图。

我不知道数据集更改时在哪里放置一些变量或动态计算。

这是我的代码：

 <style> #xaxis .domain { fill: none; stroke: #d3d3d3; } #xaxis text, #yaxis text { font-size: 12px; } </style> <div class="panel-body"> <div id="chart"> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script> var w = 1224; var categories = ["VI Jornadas de Actualización del Poder Judicial de la Ciudad Autónoma de Buenos Aires - Fuero PCyF", "VI Jornadas de Actualización del Poder Judicial de la Ciudad Autónoma de Buenos Aires - Fuero CAyT", "PRE-CONGRESO INTERNACIONAL: Una lectura de la Conv…nfancia y la Adolescencia. Puebla, México, 2014” ", "Reforma del Código Penal", "Prostitución como tema de Política Pública", "Discapacidad: Derecho a un Trato Adecuado", "Jornada sobre Reforma y Proceso Penal", "Manipulaciones judiciales de los varones violentos…icación de sus tácticas (impedimento de contacto)", "Teorías de Género", "Taller de Trabajo para una Justicia con Perspectiva de Género - Protocolo C", "Delitos Informáticos y evidencia digital en el proceso penal", "Curso Matrimonio Igualitario y Familias Diversas: Cambios Legislativos y Desafíos Judiciales ", "Ley de Identidad de Género: Antecedentes e Impacto en la Justicia", "Violencia Simbólica y Violencia Mediática", "Mesa Redonda: Género y Derecho", "Encuentros por los 15 años del Centro de Formación Judicial: Transferencia de competencias"]; var dollars = [328, 325, 95, 83, 65, 56, 55, 54, 53, 41, 37, 37, 36, 35, 34, 31] var colors = ['#0000b4', '#0082ca', '#0094ff', '#0d4bcf', '#0066AE', '#074285', '#00187B', '#285964', '#405F83', '#416545', '#4D7069', '#6E9985', '#7EBC89', '#0283AF', '#79BCBF', '#99C19E']; var grid = d3.range(25).map(function(i) { return { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 480 }; }); var tickVals = grid.map(function(d, i) { if (i > 0) { return i * 10; } else if (i === 0) { return "100"; } }); var xscale = d3.scale.linear() .domain([0, d3.max(dollars, function(d) { return d; })]) .range([0, w]); var yscale = d3.scale.linear() .domain([0, categories.length]) .range([0, 480]); var colorScale = d3.scale.quantize() .domain([0, categories.length]) .range(colors); var canvas = d3.select('#chart') .append('svg') .attr({ 'width': w, 'height': 550 }); var grids = canvas.append('g') .attr('id', 'grid') .attr('transform', 'translate(600,10)') .selectAll('line') .data(grid) .enter() .append('line') .attr({ 'x1': function(d, i) { return i * 30; }, 'y1': function(d) { return d.y1; }, 'x2': function(d, i) { return i * 30; }, 'y2': function(d) { return d.y2; }, }) .style({ 'stroke': '#adadad', 'stroke-width': '1px' }); var xAxis = d3.svg.axis(); xAxis .orient('bottom') .scale(xscale); //.ticks(5); // .tickValues(tickVals); var yAxis = d3.svg.axis(); yAxis .orient('left') .scale(yscale) .tickSize(2) .tickFormat(function(d, i) { return categories[i]; }) .tickValues(d3.range(17)); var y_xis = canvas.append('g') .attr("transform", "translate(600,35)") .attr('id', 'yaxis') .call(yAxis); var x_xis = canvas.append('g') .attr("transform", "translate(600,500)") .attr('id', 'xaxis') .call(xAxis); var chart = canvas.append('g') .attr("transform", "translate(600,10)") .attr('id', 'bars') .selectAll('rect') .data(dollars) .enter() .append('rect') .attr('height', 19) .attr({ 'x': 0, 'y': function(d, i) { return yscale(i) + 19; } }) .style('fill', function(d, i) { return '#6AA6D6' }) //colorScale(i); .attr('width', function(d) { return 0; }); var transit = d3.select("svg").selectAll("rect") .data(dollars) .transition() .duration(1000) .attr("width", function(d) { return xscale(d); }); var transitext = d3.select('#bars') .selectAll('text') .data(dollars) .enter() .append('text') .attr({ 'x': function(d) { return xscale(d) / 2.2; }, 'y': function(d, i) { return yscale(i) + 35; } }) .text(function(d) { return d; }).style({ 'fill': '#ffff', 'font-size': '14px' }); </script> 

数组类别和美元在每个查询上都会更改。

希望有人能帮助我。

谢谢！

Answer 1

在d3中，中心概念是数据联接。 通过此联接，您可以将数据绑定到可视化文件，并在基础数据更改时保持视觉持久性。

您所拥有的一切正常，但我猜您在想如何使其动态化。 好吧，您可以使用不同的基础数据多次调用该“图表定义代码”，从而使其具有动态性。

您最终得到如下内容：

var data = dollars; // or whatever your core data is.

function draw(data) {
  // all the d3 code from your example. This is the chart definition.
}

// draw the first iteration of the chart
draw(data);

// data changes
draw(data);

// data changes
draw(data);

说得通？