d3.js / JavaScript 可以像图表一样更新文本值吗？

Question

我一直在寻找解决此问题的可能方法。我基于此图为公司仪表板创建了条形图。

http://bl.ocks.org/mbostock/3887051

这很好用，但是我现在想做的是显示一些我在图表下方的文本中拥有的外部数据，例如。 “今天的总销售额 = ......” 而不仅仅是月度图表。

所以我想我在问有没有办法在 d3.js 中使用文本元素或类似的东西来做到这一点？如果不指出我可以做的事情会很棒。我还要补充一点，数据来自 csv。

这是代码：

var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c",  "#ff8c00"]);

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

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

d3.csv("data.csv", function(error, data) {
  var Names = d3.keys(data[0]).filter(function(key) { return key !== "Month"; });

  data.forEach(function(d) {
    d.Total = Names.map(function(name) { return {name: name, value: +d[name]}; });
  });

  x0.domain(data.map(function(d) { return d.Month; }));
  x1.domain(Names).rangeRoundBands([0, x0.rangeBand()]);
   y.domain([0, d3.max(data, function(d) { return d3.max(d.Total, function(d) { return     d.value; }); })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Sales Value £");

  var text = svg.selectAll("text")
      .data(data)
      .enter()
      .append("text");


  var Month = svg.selectAll(".Month")
      .data(data)
     .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x0(d.Month) + ",0)"; });

  Month.selectAll("rect")
      .data(function(d) { return d.Total; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
      .data(Names.slice().reverse())
     .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

如果您需要更多信息，请直接说

干杯！

Answer 1

在您的 HTML 文件中，为您的图表创建一个 div，并在其下方为您的标签创建一个 div

<div id="chart"></div>
<div id="label"></div>

在您的 d3 代码中，不要将 svg 元素附加到正文，而是选择“图表”div 并将 svg 元素附加到它。

var svg = d3.select("#chart").append("svg"). ...

使用该 svg 元素绘制图表，就像上面的代码一样。

在您的代码中的某个时间点计算当天的总销售额并创建一个名为totalSales 的变量。您可以通过在绘制图表时对销售额求和来做到这一点，但只要计算出totalSales，这并不重要。

在“标签”div 上创建另一个 svg 元素

var svgLabel = d3.select("#label").append("svg") ...

使用这个 svgLabel 来编写一个带有 totalSales 作为文本属性的文本元素。

svg.append("text")
...
.text(totalSales);