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); 

有意义吗？