D3.js - Ordinalskala (Version 3 bis Version 4)

Question

Ich nehme einen Kurs von Udemy auf D3.js.

Leider wegen der neuen Version D3.js, gibt es keine aktuellen Tutorials auf ihre neue Syntax, so schaue ich auf ihre API-Wiki.

Das gesagt, ich habe fest, wie man diesen Code (Version 3) übersetzen. Ich lerne Ordinalskala

var data = [ 
    {key: "Glazed",  value: 132}, 
    {key: "Jelly",  value: 71}, 
    {key: "Holes",  value: 337}, 
    {key: "Sprinkles", value: 93}, 
    {key: "Crumb",  value: 78}, 
    {key: "Chocolate", value: 43}, 
    {key: "Coconut", value: 20}, 
    {key: "Cream",  value: 16}, 
    {key: "Cruller", value: 30}, 
    {key: "Éclair",  value: 8}, 
    {key: "Fritter", value: 17}, 
    {key: "Bearclaw", value: 21} 
]; 
var w = 800; 
var h = 450; 
var margin = { 
    top: 20, 
    bottom: 20, 
    left: 20, 
    right: 20 
}; 
var width = w - margin.left - margin.right; 
var height = h - margin.top - margin.bottom; 
var x = d3.scale.linear() 
     .domain([0, d3.max(data, function(d){ 
      return d.value; 
     })]) 
     .range([0, width]); 
var y = d3.scale.ordinal() 
     .domain(data.map(function(entry){ 
      return entry.key; 
     })) 
     .rangeBands([0, height]); 
var svg = d3.select("body").append("svg") 
      .attr("id", "chart") 
      .attr("width", w) 
      .attr("height", h); 
var chart = svg.append("g") 
      .classed("display", true) 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
function plot(params){ 
    this.selectAll(".bar") 
     .data(params.data) 
     .enter() 
      .append("rect") 
      .classed("bar", true) 
      .attr("x", 0) 
      .attr("y", function(d,i){ 
       return y(d.key); 
      }) 
      .attr("height", function(d,i){ 
       return y.rangeBand()-1; 
      }) 
      .attr("width", function(d){ 
       return x(d.value); 
      }); 
    this.selectAll(".bar-label") 
     .data(params.data) 
     .enter() 
      .append("text") 
      .classed("bar-label", true) 
      .attr("x", function(d){ 
       return x(d.value); 
      }) 
      .attr("dx", -4) 
      .attr("y", function(d,i){ 
       return y(d.key); 
      }) 
      .attr("dy", function(d,i){ 
       return y.rangeBand()/1.5+2; 
      }) 
      .text(function(d){ 
       return d.value; 
      }) 
} 
plot.call(chart, {data: data}); 

auf Version 4.

an ihrer API Suche Wiki, es scheint, dass loszuwerden rangeBand Funktion CHANGES.MD

Ich habe mein Bestes versucht, aber übersetzen Ich kann nicht herausfinden, was es falsch ist:

var data = [ 
    {key: "Glazed",  value: 132}, 
    {key: "Jelly",  value: 71}, 
    {key: "Holes",  value: 337}, 
    {key: "Sprinkles", value: 93}, 
    {key: "Crumb",  value: 78}, 
    {key: "Chocolate", value: 43}, 
    {key: "Coconut", value: 20}, 
    {key: "Cream",  value: 16}, 
    {key: "Cruller", value: 30}, 
    {key: "Éclair",  value: 8}, 
    {key: "Fritter", value: 17}, 
    {key: "Bearclaw", value: 21} 
]; 
var w = 800; 
var h = 450; 
var margin = { 
    top: 20, 
    bottom: 20, 
    left: 20, 
    right: 20 
}; 
var width = w - margin.left - margin.right; 
var height = h - margin.top - margin.bottom; 
var x = d3.scaleLinear() 
     .domain([0, d3.max(data, function(d){ 
      return d.value; 
     })]) 
     .range([0, width]); 
var y = d3.scaleOrdinal() 
     .domain(data.map(function(entry){ 
      return entry.key; 
     })) 
     .range([0, height]); 

var svg = d3.select("body").append("svg") 
      .attr("id", "chart") 
      .attr("width", w) 
      .attr("height", h); 
var chart = svg.append("g") 
      .classed("display", true) 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
function plot(params){ 
    this.selectAll(".bar") 
     .data(params.data) 
     .enter() 
      .append("rect") 
      .classed("bar", true) 
      .attr("x", 0) 
      .attr("y", function(d,i){ 
       return y(d.key); 
      }) 
      .attr("height", function(d,i){ 
       return y.range(1)-1; 
      }) 
      .attr("width", function(d){ 
       return x(d.value); 
      }); 
    this.selectAll(".bar-label") 
     .data(params.data) 
     .enter() 
      .append("text") 
      .classed("bar-label", true) 
      .attr("x", function(d){ 
       return x(d.value); 
      }) 
      .attr("dx", -4) 
      .attr("y", function(d,i){ 
       return y(d.key); 
      }) 
      .attr("dy", function(d,i){ 
       return y.range(1)/1.5+2; 
      }) 
      .text(function(d){ 
       return d.value; 
      }) 
} 
plot.call(chart, {data: data}); 

Working Version 3

Not Working Version 4

Answer 1

Unten ist der Arbeitscode.

var data = [ 
    {key: "Glazed",  value: 132}, 
    {key: "Jelly",  value: 71}, 
    {key: "Holes",  value: 337}, 
    {key: "Sprinkles", value: 93}, 
    {key: "Crumb",  value: 78}, 
    {key: "Chocolate", value: 43}, 
    {key: "Coconut", value: 20}, 
    {key: "Cream",  value: 16}, 
    {key: "Cruller", value: 30}, 
    {key: "Éclair",  value: 8}, 
    {key: "Fritter", value: 17}, 
    {key: "Bearclaw", value: 21} 
]; 
var w = 800; 
var h = 450; 
var margin = { 
    top: 20, 
    bottom: 20, 
    left: 20, 
    right: 20 
}; 
var width = w - margin.left - margin.right; 
var height = h - margin.top - margin.bottom; 
var x = d3.scaleLinear() 
     .domain([0, d3.max(data, function(d){ 
      return d.value; 
     })]) 
     .range([0, width]); 
/*var y = d3.scale.ordinal() 
     .domain(data.map(function(entry){ 
      return entry.key; 
     })) 
     .rangeBands([0, height]);*/ 
var y = d3.scaleBand() 
     .domain(data.map(function(entry){ 
      return entry.key; 
     })) 
    .rangeRound([0, height]) 
    .padding(0.1);  

var svg = d3.select("body").append("svg") 
      .attr("id", "chart") 
      .attr("width", w) 
      .attr("height", h); 
var chart = svg.append("g") 
      .classed("display", true) 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
function plot(params){ 
    this.selectAll(".bar") 
     .data(params.data) 
     .enter() 
      .append("rect") 
      .classed("bar", true) 
      .attr("x", 0) 
      .attr("y", function(d,i){ 
       return y(d.key); 
      }) 
      .attr("height", function(d,i){ 
       return y.bandwidth()-1; 
      }) 
      .attr("width", function(d){ 
       return x(d.value); 
      }); 
    this.selectAll(".bar-label") 
     .data(params.data) 
     .enter() 
      .append("text") 
      .classed("bar-label", true) 
      .attr("x", function(d){ 
       return x(d.value); 
      }) 
      .attr("dx", -4) 
      .attr("y", function(d,i){ 
       return y(d.key); 
      }) 
      .attr("dy", function(d,i){ 
       return y.bandwidth()/1.5+2; 
      }) 
      .text(function(d){ 
       return d.value; 
      }) 
} 
plot.call(chart, {data: data}); 

Answer 2

Schauen Sie bitte auf d3.scaleBand(). Die d3.v4 ordinale Skalierungsimplementierung ist in d3.scaleBand() verfügbar.

var data = [ 
 
    {key: "Glazed",  value: 132}, 
 
    {key: "Jelly",  value: 71}, 
 
    {key: "Holes",  value: 337}, 
 
    {key: "Sprinkles", value: 93}, 
 
    {key: "Crumb",  value: 78}, 
 
    {key: "Chocolate", value: 43}, 
 
    {key: "Coconut", value: 20}, 
 
    {key: "Cream",  value: 16}, 
 
    {key: "Cruller", value: 30}, 
 
    {key: "Éclair",  value: 8}, 
 
    {key: "Fritter", value: 17}, 
 
    {key: "Bearclaw", value: 21} 
 
]; 
 
var w = 500; 
 
var h = 300; 
 
var margin = { 
 
    top: 20, 
 
    bottom: 20, 
 
    left: 20, 
 
    right: 20 
 
}; 
 
var width = w - margin.left - margin.right; 
 
var height = h - margin.top - margin.bottom; 
 
var x = d3.scaleLinear() 
 
     .domain([0, d3.max(data, function(d){ 
 
      return d.value; 
 
     })]) 
 
     .range([0, width]); 
 
var y = d3.scaleBand() 
 
     .domain(data.map(function(entry){ 
 
      return entry.key; 
 
     })) 
 
     .range([height, 0]) 
 
\t \t .padding(0.1); 
 

 
var svg = d3.select("body").append("svg") 
 
      .attr("id", "chart") 
 
      .attr("width", w) 
 
      .attr("height", h); 
 
var chart = svg.append("g") 
 
      .classed("display", true) 
 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 
function plot(params){ 
 
    this.selectAll(".bar") 
 
     .data(params.data) 
 
     .enter() 
 
      .append("rect") 
 
      .classed("bar", true) 
 
      // .attr("x", function(d) { 
 
\t \t \t \t // return x(d.value); }) 
 
      .attr("y", function(d,i){ 
 
       return y(d.key); 
 
      }) 
 
      .attr("height", y.bandwidth()) 
 
      .attr("width", function(d){ 
 
       return x(d.value); 
 
      }); 
 

 
} 
 
plot.call(chart, {data: data});

.bar { fill: steelblue; }

<script src="https://d3js.org/d3.v4.min.js"></script>