D3 how to show my dataset in text or using legend

Question

I want to display a legend or text or my data at my chart. I can display my chart but I don't know how to display the "lab" and "labno" value like a text. I dont know where should I put my legend. I want to display it inside my chart function.

I want to display something like this

x is 30
y is True
z is True

Here is my code

 var data =
 [
   {algo:"a ", accuracy: 50, lab:"x ", labno: 30  },
   {algo:"b", accuracy: 96.29, lab:"y", labno:"True" },
   {algo:"c", accuracy: 95, lab:"z", labno: "True" }
   ];


function drawBarcharts(data) {
var margin = {top:10, right:10, bottom:90, left:50};
var width = 960 - margin.left - margin.right;
   var height = 500 - margin.top - margin.bottom;
   var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .03)
   var yScale = d3.scale.linear().range([height, 0])
   var xScale2 = d3.scale.linear();

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

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");


var svgContainer = d3.select("#chartID").append("svg")
    .attr("width", width+margin.left + margin.right)
    .attr("height",height+margin.top + margin.bottom)
    .append("g").attr("class", "container")
    .attr("transform", "translate("+ margin.left +","+ margin.top +")");

xScale.domain(data.map(function(d) { return d.algo; }));
yScale.domain([0, d3.max(data, function(d) { return d.accuracy })]);



var xAxis_g = svgContainer.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (height) + ")")
    .call(xAxis)
    .selectAll("text");


    var yAxis_g = svgContainer.append("g")

    .append("text")
    .text("abc");

  svgContainer.selectAll(".bar")
      .data(data)
      .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return xScale(d.algo); })
  .attr("width", xScale.rangeBand())
  .attr("y", function(d) { return yScale(d.accuracy); })

  .attr("height", function(d) { return height - yScale(d.accuracy); })

  svgContainer.selectAll(".text")     
    .data(data)
    .enter()
    .append("text")
    .attr("class","label")
    .attr("x", (function(d) { return xScale(d.algo) + xScale.rangeBand() / 2 ; }      ))
    .attr("y", function(d) { return yScale(d.accuracy) +10; })

    .attr("dy", ".75em")
   .text(function(d) { return d.accuracy; })

}

Answer 1

Here you go.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Test</title> <script src="https://d3js.org/d3.v3.min.js"></script> </script> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; } svg { width: 100%; height: 100%; position: center; } text{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:12px; } .axis text { font: 10px sans-serif; } .axis path{ fill: none; stroke: #000; } .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .axis .tick line { stroke-width: 1; stroke: rgba(0, 0, 0, 0.2); } .axisHorizontal path{ fill: none; } .axisHorizontal line { fill: none; stroke: #000; shape-rendering: crispEdges; } .axisHorizontal .tick line { stroke-width: 1; stroke: rgba(0, 0, 0, 0.2); } .bar { fill: steelblue; fill-opacity: .9; } </style> </head> <body> <div id="chartID"></div> <script type="text/javascript"> var data = [ {algo:"a ", accuracy: 50, lab:"x ", labno: 30 }, {algo:"b", accuracy: 96.29, lab:"y", labno:"True" }, {algo:"c", accuracy: 95, lab:"z", labno: "True" } ]; var drawBarcharts = function() { var margin = {top:10, right:10, bottom:90, left:50}; var width = 450 - margin.left - margin.right; var height = 300 - margin.top - margin.bottom; var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .03) var yScale = d3.scale.linear().range([height, 0]) var xScale2 = d3.scale.linear(); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); var svgContainer = d3.select("#chartID").append("svg") .attr("width", width+margin.left + margin.right) .attr("height",height+margin.top + margin.bottom) .append("g").attr("class", "container") .attr("transform", "translate("+ margin.left +","+ margin.top +")"); xScale.domain(data.map(function(d) { return d.algo; })); yScale.domain([0, d3.max(data, function(d) { return d.accuracy })]); var xAxis_g = svgContainer.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (height) + ")") .call(xAxis) .selectAll("text"); //var yAxis_g = svgContainer.append("g") //.append("text") //.text("abc"); svgContainer.selectAll(".bar") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", function(d) { return xScale(d.algo); }) .attr("width", xScale.rangeBand()) .attr("y", function(d) { return yScale(d.accuracy); }) .attr("height", function(d) { return height - yScale(d.accuracy); }) svgContainer.selectAll(".text") .data(data) .enter() .append("text") .attr("class","label") .attr("x", (function(d) { return xScale(d.algo) + xScale.rangeBand() / 2 ; } )) .attr("y", function(d) { return yScale(d.accuracy) +10; }) .attr("dy", ".75em") .text(function(d) { return d.labno; }) var legend = svgContainer.selectAll(".legend") .data(data) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("text") .attr("x", 10) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "start") .text(function(d) { return d.lab + ' is ' + d.labno; }); }(data); </script> </body> </html>

D3 how to show my dataset in text or using legend

Question

1 answers

solution1
-1 2017-12-11 06:23:34

D3 how to show my dataset in text or using legend

Question

1 answers

solution1 -1 2017-12-11 06:23:34

solution1
-1 2017-12-11 06:23:34