Question

我一直在寻找一段时间来寻找解决此问题的方法。我已根据此图表为公司信息中心创建了条形图。

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

这很有效，但我现在要做的是显示我在图表下面的文本中的一些外部数据，例如。＆＃34;今日总销售额= ......＆＃34;而不仅仅是每月图表。

所以我想我问有没有办法在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元素附加到正文，而是选择“chart”div并向其附加一个svg元素。

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

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

在您的代码中的某个时刻计算当天的总销售额并创建一个名为totalSales的变量。您可以通过在绘制图表时总结销售额来实现此目的，但只要计算totalSales就无关紧要。

在“label”div

上创建另一个svg元素

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

使用此svgLabel编写一个文本元素，其中totalSales为文本属性。

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

d3.js / JavaScript可以更新图表中的文本值吗？

1 个答案: