D3 - 来自条形图示例的线图

Question

I am trying to modify below code from this example

https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54/

to a line plot or connected scatter plot (preferred). How?

Nearly all simple D3 examples I find a bar charts or have different syntax since they read data from a cvs and not locally in the example above. D3 is a bit cryptic for me so far.

    this.g.selectAll('.bar')
      .data(this.barData)
      .enter()
      .append('rect')
      .attr('class', 'bar')
      .attr('fill', 'rgb(34, 167, 240)')
      .attr('x', (d) => this.x(d.season))
      .attr('y', (d) => this.y(d.viewers))
      .attr('width', this.x.bandwidth())
      .attr('height', (d) => this.height - this.y(d.viewers));

Answer 1

I believe this is a line plot, not sure if it meets your requirements, let me know:

 // set the dimensions and margins of the graph var margin = {top: 10, right: 30, bottom: 30, left: 60}, width = 460 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.select("#my_dataviz") .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("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) { //console.log(data); //}); var data = [ { x: 1, y: 2500000 }, { x: 2, y: 3800000 }, { x: 3, y: 5000000 }, { x: 4, y: 6900000 }, { x: 5, y: 6900000 }, { x: 6, y: 7500000 }, { x: 7, y: 10000000 }, { x: 8, y: 17000000 } ]; // Add X axis var x = d3.scaleLinear() .domain([0, 10]) .range([ 0, width ]); svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // Add Y axis var y = d3.scaleLinear() .domain([0, 20000000]) .range([ height, 0]); svg.append("g") .call(d3.axisLeft(y)); // Add dots - scatter plot //svg.append('g') // .selectAll("dot") // .data(data) // .enter() // .append("circle") // .attr("cx", function (d) { return x(dx); } ) // .attr("cy", function (d) { return y(dy); } ) // .attr("r", 1.5) // .style("fill", "#69b3a2") svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", d3.line() .x(function(d) { return x(dx) }) .y(function(d) { return y(dy) }) ) svg.append("text") .attr("transform", "translate(" + (width/2) + " ," + (height + margin.top + 20) + ")") .style("text-anchor", "middle") .text("season"); // Add the y Axis svg.append("g") .call(d3.axisLeft(y)); // text label for the y axis svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x",0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("viewers"); </script>

 <script src="https://d3js.org/d3.v4.js"></script> <!-- Create a div where the graph will take place --> <div id="my_dataviz"></div>

Important as for reading from CSV, it's relatively simple to grasp how to get rid of it in the examples. Here's how you could load data from csv:

d3.csv("https://.../master/Example_dataset/2_TwoNum.csv", function(data) {
//do something with data here
});

So, basically you do the drawing within the callback (once you've got the data, right?). If you know data when writing the script (like in your example), you simply assign the data and use it in d3 transformations. Here's a great example of scatter plot drawing in d3 . All I've done is simply got rid of the callback and assign your data + re-scale the x and y axes.