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

有意义吗？

D3水平条形图

1 个答案: