增加d3散点图的大小

Question

I have a scatter plot made in d3.v3 and no matter how large i increase the width and height variables it does not take up more screen space.

var w = 700;
        var h = 700;

        var dataset = [
                        "Over 50 pairs of coordinates that look like [0,1][0,43],
                      ];

        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("x", function(d) {
                return d[0];
           })
           .attr("y", function(d) {
                return d[1];
           })
           .attr("width",5)
           .attr("height",5);

There are more than 50 coordinates in my dataset and i want to be able to display them well so that is why i want this to take up more screen space. Currently there is nothing in my html, and no css for this. How can i adjust this so that the scatter plot takes more screen space?

Answer 1

The code you show doesn't place data points with any consideration of width or height, it places data points based on the values in the data:

 .attr("x", function(d) {
     return d[0];             
 })
 .attr("y", function(d) {
     return d[1];
 })

The x and y attributes, without any SVG transformation, expect pixel values. If a point has the datum [25,25] it will be placed 25 pixels from the top and left. Height and width of the svg do not matter - you are stating the pixel position based on the data, not based on the svg dimensions in combination with the data.

Scales are a fundamental part of d3 - you can scale the x and y values of your data points across a range of pixel values. To do this we need to know the domain of the input data - the extent of input values - and the range of the output values - the extent of output values.

There are a number of scales built into D3, including power, logarithmic and linear. I'll demonstrate a linear scale below, but the form is very similar for other continuous scales, such as those noted above.

var xScale = d3.scaleLinear()  // create a new linear scale
  .domain([0,50])              // map values from 0 to 50 to:
  .range([0,width])            // to pixel values of 0 through width

var yScale = d3.scaleLinear()  // create a new linear scale
  .domain([0,50])              // map values from 0 to 50 to:
  .range([height,0])           // to pixel values of height through 0

Since in SVG coordinate space y=0 is the top of the SVG, and normally we want data with y=0 to be displayed at the bottom of the graph, we use a range of [height,0] rather than [0,height]

With the scales set up, to return the pixel value for a given data value we use:

xScale(d[0]); // assuming d[0] holds the x value

or

yScale(d[1]); // assuming d[1] holds the y value

Together this gives us:

 var w = 700; var h = 700; var dataset = d3.range(50).map(function(d) { return [Math.random()*50,Math.random()*50]; }) var x = d3.scaleLinear() .domain([0,50]) // input extent .range([0,w]) // output extent var y = d3.scaleLinear() .domain([0,50]) .range([h,0]) //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d) { return x(d[0]); }) .attr("y", function(d) { return y(d[1]); }) .attr("width",5) .attr("height",5); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script> 

---

Of course we might not know the domain of the data if its dynamic, so d3 has a few built in helpers including d3.min, d3.max, d3.extent.

d3.min and d3.max iterate through an array to find the minimum and maximum values of some property of each item in the data array:

 d3.min(dataArray, function(d) {
     return d.property;
 })

 d3.max(dataArray, function(d) {
     return d.property;
 })

D3.extent does both at the same time returning an array containing min and max:

 d3.extent(dataArray, function(d) {
     return d.property;
 })

We can plug those into the scales too:

 var w = 700; var h = 700; var dataset = d3.range(50).map(function(d) { return [Math.random()*50,Math.random()*50]; }) var x = d3.scaleLinear() .domain([0,d3.max(dataset, function(d) { return d[0]; }) ]) // input extent .range([0,w]) // output extent var y = d3.scaleLinear() .domain( d3.extent(dataset, function(d) { return d[1]; }) ) .range([h,0]) //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d) { return x(d[0]); }) .attr("y", function(d) { return y(d[1]); }) .attr("width",5) .attr("height",5); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script> 

Answer 2

The below works perfectly fine for me. The things you might need to check is :

1. The coordinates range is more than 5. (or you might need to use scale and axis)
2. Is there a overriding styles to your g

 var w = 700; var h = 700; var dataset = [[10,10],[10,30],[30,50],[30,70]]; //Create SVG element var svg = d3.select("#scatterplot") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d) { return d[0]; }) .attr("y", function(d) { return d[1]; }) .attr("width",5) .attr("height",5); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id='scatterplot'></div>