Unable to create a bar chart from json data using d3.js -


I'm trying to get a chart running on an example basis.

  & lt; Body & gt; & Lt; / Body & gt; & Lt; Script & gt; var width = 960, height = 500; var margin = {top: 20, right: 20, bottom: 30, on the left: 40}; // data var data = [{"x": "A", "y": 0.15}, {"x": "b", "y": 0.10}, {"x": "c", "y ": 0.35}]; // X and Y scale var var xScale = d3.scale.ordinal () .rangeRoundBands ([0, width], .1); var yScale = d3.scale.linear () .Range ([height, 0]); // X and Y axis var xAxis = d3.svg.axis () .scale (xScale). Core ("bottom"); Var yAxis = d3.svg.axis () .scale (yScale). Example ("left"). Tike (10, "%"); // svg container var svg = d3.select ("body"). Append ("SVG") .attr ("width", width + margin.left + margin.right) .attr ("height", height + margin) .top + margin.bottom) .append ("g") .attr ("Conversion", "translation (" + margin. Left + "," + margin.Top + ")"); // create bars d3.selectAll (". Bar"). Data (.) .enter () .append ("rect") .attr ("class", "bar") .attr ("x", function ( d)) {Return xScale (d.letter);}) .attr ("width", xScale.rangeBand ()) .attr ("y", function (d) {return yScale (d.frequency);}). ) () "Height", function (d) {height height - yScale (d.frequency);}); x strings ("transform", "translate (0," + + + + ")") on the x-axis drawing at // svg svg.append ("g") .attr ("class", "x axis"). xAxis); Drawing y axis at // svg svg.append ("g") .attr ("square", "y axis"). Call (yAxis) .append ("text") .attr ("transform", "rotate (-90)".) ("Y", 6) .attr ("dy", ".71em"). Style ("text-anchor", "end") .text ("Frequency"); & Lt; / Script & gt;   

All I'm seeing is Y axis and nothing else is what I'm missing?

There are three problems with your code. First of all, you have to set your scalable domain. For example, code

  x.domain (data.map (function (d) {return d.list;}) to do this;) Y.domain ([0, d3.max (data, function (d) {return d.freecency;})));   

that you want to optimize according to your variable names and data:

  xScale.domain (data.map (function (d) {return dx ;})); YScale.domain ([0, d3.max (data, function (d) {return di;})));   

Secondly, you need to select the svg elements in the .bar elements so that new bars can be linked to SVG: / P>

  svg.selectAll (". Bar"). Data (data) .enter () // etc Finally, you forgot to change the data elements while copying and pasting your code.  .letter  And  .requency  when it is  .x  and  .y :  
  .attr ( "x", function (d) {return xScale (dx);}) .attr ("width", xScale.rangeBand ()) .attr ("y", function (d) {return yScale (d);}) .attr ("height", function (d) {return height - yScale (d);});   

Full demo

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -