设置坐标轴范围根据数据集最小和最大值在d3.js

Question

我试图设置x和y轴的范围根据最大值和最小值为每个（即最大和最小的x和最大值和最小值为y）。我知道域控制着这个范围，但我无法弄清楚如何根据数据动态设置它。我知道一堆这种代码不适用于这个问题，但认为我会发布一切。这里所说：

var margin = {t:30, r:20, b:20, l:40 }, 
    w = 600 - margin.l - margin.r, 
    h = 500 - margin.t - margin.b, 
    x = d3.scale.linear().range([0, w]), 
    y = d3.scale.linear().range([h - 60, 0]), 
    //colors that will reflect geographical regions 
    color = d3.scale.category10(); 

var svg = d3.select("#chart").append("svg") 
    .attr("width", w + margin.l + margin.r) 
    .attr("height", h + margin.t + margin.b); 
    fig = svg.append("g").attr("transform", "translate(40, 20)"); 

// set axes, as well as details on their ticks 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .ticks(20) 
    .tickSubdivide(true) 
    .tickSize(6, 3, 0) 

    .orient("bottom"); 


var yAxis = d3.svg.axis() 
    .scale(y) 
    .ticks(20) 
    .tickSubdivide(true) 
    .tickSize(6, 3, 0) 
    .orient("left"); 

var startX = d3.min(x.domain()), 
endX = d3.max(x.domain()), 
startY = d3.min(y.domain()), 
endY = d3.max(y.domain()); 
var lines = [{x1: startX, x2: endX, y1: (startY + endY)/2, y2: (startY + endY)/2}, 
     {x1: (startX + endX)/2, x2: (startX + endX)/2, y1: startY, y2: endY}] 

fig.selectAll(".grid-line") 
.data(lines).enter() 
.append("line") 
.attr("x1", function(d){ return x(d.x1); }) 
.attr("x2", function(d){ return x(d.x2); }) 
.attr("y1", function(d){ return y(d.y1); }) 
.attr("y2", function(d){ return y(d.y2); }) 
.style("stroke", "#000") 



// group that will contain all of the plots 
var groups = svg.append("g").attr("transform", "translate(" + margin.l + "," + margin.t + ")"); 

// array of the regions, used for the legend 
var regions = ["Demographic", "Financial", "Content Interests", "Social Media", "Behaviors & Attributes", "Location Distribution","CPG Buying"] 



d3.csv("trust-business.csv", function(data) { 

// sort data alphabetically by region, so that the colors match with legend 
data.sort(function(a, b) { return d3.ascending(a.region, b.region); }) 
console.log(data) 

var x0 = Math.max(-d3.min(data, function(d) { return d.trust; }), d3.max(data, function(d) { return d.trust; })); 


x.domain([0,100]); 
y.domain([0,100]) 

// style the circles, set their locations based on data 
var circles = 
groups.selectAll("circle") 
    .data(data) 
    .enter().append("circle") 
    .attr("class", "circles") 
    .attr({ 
    cx: function(d) { return x(+d.trust); }, 
    cy: function(d) { return y(+d.business); }, 
    r: 8, 
    id: function(d) { return d.country; } 
    }) 
    .style("fill", function(d) { return color(d.region); }); 

// what to do when we mouse over a bubble 
var mouseOn = function() { 
    var circle = d3.select(this); 

// transition to increase size/opacity of bubble 
    circle.transition() 
    .duration(800).style("opacity", 1) 
    .attr("r", 16).ease("elastic"); 

    // append lines to bubbles that will be used to show the precise data points. 
    // translate their location based on margins 
    svg.append("g") 
     .attr("class", "guide") 
    .append("line") 
     .attr("x1", circle.attr("cx")) 
     .attr("x2", circle.attr("cx")) 
     .attr("y1", +circle.attr("cy") + 26) 
     .attr("y2", h - margin.t - margin.b) 
     .attr("transform", "translate(40,20)") 
     .style("stroke", circle.style("fill")) 
     .transition().delay(200).duration(400).styleTween("opacity", 
        function() { return d3.interpolate(0, .5); }) 

    svg.append("g") 
     .attr("class", "guide") 
    .append("line") 
     .attr("x1", +circle.attr("cx") - 16) 
     .attr("x2", 0) 
     .attr("y1", circle.attr("cy")) 
     .attr("y2", circle.attr("cy")) 
     .attr("transform", "translate(40,30)") 
     .style("stroke", circle.style("fill")) 
     .transition().delay(200).duration(400).styleTween("opacity", 
        function() { return d3.interpolate(0, .5); }); 

// function to move mouseover item to front of SVG stage, in case 
// another bubble overlaps it 
    d3.selection.prototype.moveToFront = function() { 
     return this.each(function() { 
     this.parentNode.appendChild(this); 
     }); 
    }; 

// skip this functionality for IE9, which doesn't like it 
    if (!$.browser.msie) { 
     circle.moveToFront(); 
     } 
}; 
// what happens when we leave a bubble? 
var mouseOff = function() { 
    var circle = d3.select(this); 

    // go back to original size and opacity 
    circle.transition() 
    .duration(800).style("opacity", .5) 
    .attr("r", 8).ease("elastic"); 

    // fade out guide lines, then remove them 
    d3.selectAll(".guide").transition().duration(100).styleTween("opacity", 
        function() { return d3.interpolate(.5, 0); }) 
     .remove() 
}; 

// run the mouseon/out functions 
circles.on("mouseover", mouseOn); 
circles.on("mouseout", mouseOff); 

// tooltips (using jQuery plugin tipsy) 
circles.append("title") 
     .text(function(d) { return d.country; }) 

$(".circles").tipsy({ gravity: 's', }); 

// the legend color guide 
var legend = svg.selectAll("rect") 
     .data(regions) 
    .enter().append("rect") 
    .attr({ 
     x: function(d, i) { return (40 + i*80); }, 
     y: h, 
     width: 25, 
     height: 12 
    }) 
    .style("fill", function(d) { return color(d); }); 


// legend labels  
    svg.selectAll("text") 
     .data(regions) 
    .enter().append("text") 
    .attr({ 
    x: function(d, i) { return (40 + i*80); }, 
    y: h + 24, 
    }) 
    .text(function(d) { return d; }); 

// draw axes and axis labels 
svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(" + margin.l + "," + (h - 60 + margin.t) + ")") 
    .call(xAxis); 

svg.append("g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(" + margin.l + "," + margin.t + ")") 
    .call(yAxis); 

svg.append("text") 
    .attr("class", "x label") 
    .attr("text-anchor", "end") 
    .attr("x", w + 50) 
    .attr("y", h - margin.t - 5) 
    .text("Total Incidence"); 

svg.append("text") 
    .attr("class", "y label") 
    .attr("text-anchor", "end") 
    .attr("x", -20) 
    .attr("y", 45) 
    .attr("dy", ".75em") 
    .attr("transform", "rotate(-90)") 
    .text("Relative Variance"); 
}); 

Answer 1

可以使用d3.extent()获取数组的程度和在域中使用它：

x.domain(d3.extent(data, function(d) { return +d.trust; })); 
y.domain(d3.extent(data, function(d) { return +d.business; }));