d3.js Wie fügen Sie Zeilen hinzu, um ein Balkendiagramm

Habe ich eine Daten-Satz 4 Werte. [a,b,c,d]. Derzeit sind Sie in einem Balkendiagramm dargestellt, für jeden Wert einen Balken. Jetzt sind die Werte c und d sind Durchschnittswerte, ich möchte die Anzeige als Linien hinter den Balken von a und b ist. Ist das möglich mit d3? Wie kann ich wechseln zwischen Balken-oder Linien-Anzeige innerhalb der gleichen dataarray?

Vielen Dank für Ihre Hilfe.

InformationsquelleAutor Olga | 2012-11-05

  1. 9

    Bin ich Entsendung ein Beispiel, weil hier keine Antworten bieten ein funktionierendes Beispiel in jsbin oder jsfiddle, etc. der eine Balken mit einer Linie.

    http://jsbin.com/gisinomo/1/edit

    Beispiel ist eine Abspaltung von der einfachen Bar-Chart auf der d3-wiki.

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

    CSS 

    body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: #444;
  stroke-width: 1.5px;
}

    JavaScript 

    var data = [{ "letter": "A", "frequency": .08167},
{ "letter": "B", "frequency": .01492},
{ "letter": "C", "frequency": .02780},
{ "letter": "D", "frequency": .04253},
{ "letter": "E", "frequency": .12702},
{ "letter": "F", "frequency": .02288},
{ "letter": "G", "frequency": .02022},
{ "letter": "H", "frequency": .06094},
{ "letter": "I", "frequency": .06973},
{ "letter": "J", "frequency": .00153},
{ "letter": "K", "frequency": .00747},
{ "letter": "L", "frequency": .04025},
{ "letter": "M", "frequency": .02517},
{ "letter": "N", "frequency": .06749},
{ "letter": "O", "frequency": .07507},
{ "letter": "P", "frequency": .01929},
{ "letter": "Q", "frequency": .00098},
{ "letter": "R", "frequency": .05987},
{ "letter": "S", "frequency": .06333},
{ "letter": "T", "frequency": .09056},
{ "letter": "U", "frequency": .02758},
{ "letter": "V", "frequency": .01037},
{ "letter": "W", "frequency": .02465},
{ "letter": "X", "frequency": .00150},
{ "letter": "Y", "frequency": .01971},
{ "letter": "Z", "frequency": .00074}];

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

var formatPercent = d3.format(".0%");

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

var x2 = d3.scale.ordinal()
  .rangeBands([0, width], 0);

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

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

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

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


  data.forEach(function(d) {
    d.frequency = +d.frequency;
  });

  x.domain(data.map(function(d) { return d.letter; }));
  x2.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

  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("Frequency");

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); });

var dataSum = d3.sum(data, function(d) { return d.frequency; }); 

 var line = d3.svg.line()
    .x(function(d, i) { 
      return x2(d.letter) + i; })
    .y(function(d, i) { return y(dataSum/data.length); }); 

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
    Ich sehe nicht, "barchart mit einer Linie" in Ihrem jsbin, einfach nur sagen...
    Die Linie wurde im original. Ich habe aktualisiert die fiddle und code return x2(d.letter) zu bekommen, es zeigt wieder.

    InformationsquelleAutor mg1075

  2. 1

    Machen Sie eine Liste von Objekten, die durch zwei Eigenschaften aus Ihren Daten:

    var data = [1,2,3,4];
var objects = data.slice(0, data.length/2).map(
  function(d,i) { return { value:d, average:data[i+data.length/2] }; } 
);

    Dann können Sie so etwas tun (nicht getestet):

    var bars = chart.selectAll("g.bar")
   .data(objects)
  .enter().append("g")
    .attr("class", "bar")
    .attr("transform", function(d,i) { return "translate("+(i*10)+",0)"; });


bars.append("rect")
    .attr("x", 0)
    .attr("y", function(d,i) { return height - d.value; })
    .attr("width", 10)
    .attr("height", function(d,i) { return d.value; });

bars.append("line")
    .attr("x1", 0)
    .attr("y1", function(d,i) { return height - d.average; })
    .attr("x2", 10)
    .attr("y2", function(d,i) { return height - d.average; });

    InformationsquelleAutor Ilya Boyandin

Schreibe einen Kommentar