Chèn đệm sao cho các điểm không trùng với y hoặc x-trục

Tôi có tạo ra âm mưu này trong D3: http://bl.ocks.org/cddesja/aee65f660c24cb2144fd Chèn đệm sao cho các điểm không trùng với y hoặc x-trục

Có hai điều tôi muốn thay đổi.

1) Tôi muốn tạo thành sao cho không có điểm nào trùng với trục y hoặc trục x. Tôi nghĩ rằng tôi có thể sử dụng transform() để tạo ra một chút của một bộ đệm nhưng tạo ra một khoảng cách giữa x và y trục đường, một cái gì đó tôi không muốn. Làm thế nào tôi nên làm điều này một cách chính xác?

2) Tôi muốn loại bỏ dấu tick tại giao điểm của các dòng x và y. Tôi hy vọng rằng một khi tôi di chuyển các dấu tick (và sau đó là pts và dòng) rằng những dấu tích tự động biến mất. Tôi không biết điều đó có thực sự đúng hay không.

Xin cảm ơn trước. Chris

Nguồn

2016-01-19 Aunt Emma

1.) Điều này được kiểm soát bởi số domain trong thang của bạn. Vì tên miền của bạn được đặt ở mức độ dữ liệu, trục bắt đầu ở đó. Sửa lỗi dễ dàng là tăng miền của bạn lên + - N phần trăm của phạm vi. Ngoài ra, tôi khuyên bạn nên xóa .nice() vì bạn sẽ kết thúc chiến đấu để kiểm soát phạm vi.

// get extents and range 
var xExtent = d3.extent(data, function(d) { return d.grade; }), 
    xRange = xExtent[1] - xExtent[0], 
    yExtent = d3.extent(data, function(d) { return d.bin; }), 
    yRange = yExtent[1] - yExtent[0]; 

// set domain to be extent +- 5% 
x.domain([xExtent[0] - (xRange * .05), xExtent[1] + (xRange * .05)]); 
y.domain([yExtent[0] - (yRange * .05), yExtent[1] + (yRange * .05)]);

2.) Điều này được kiểm soát bởi tùy chọn outerTickSize. Chỉ cần đặt nó bằng không.

var yAxisLeft = d3.svg.axis() 
    .scale(y) 
    .ticks(yTicks) 
    .outerTickSize(0) //<-- set to zero 
    .orient("left");

Full mẫu mã làm việc:

<!DOCTYPE html> 
 
<html> 
 
<meta charset="utf-8"> 
 
<head> 
 
\t <title>Proportion of Students Suspended <body></body> Grade</title> 
 
\t <style type="text/css"> 
 
body { 
 
    font: 10px Helvetica; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 
</style> 
 

 
</head> 
 
<body> 
 
\t <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 

 
\t <script type="text/javascript"> 
 
// Set up the margins 
 
var margin = {top: 50, right: 50, bottom: 30, left: 50}, 
 
    width = 1000 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom 
 
    yTicks = 5 
 

 
var x = d3.scale.linear() 
 
    .range([0, width]); 
 

 
var y = d3.scale.linear() 
 
    .range([height, 0]); 
 

 
var xAxisBot = d3.svg.axis() 
 
    .scale(x) 
 
    .outerTickSize(0) 
 
    .orient("bottom"); 
 

 
var xAxisTop = d3.svg.axis() 
 
    .scale(x) 
 
    .tickFormat('') 
 
    .outerTickSize(0) 
 
    .orient("top"); 
 

 
var yAxisLeft = d3.svg.axis() 
 
    .scale(y) 
 
    .ticks(yTicks) 
 
    .outerTickSize(0) 
 
    .orient("left"); 
 

 
var yAxisRight = d3.svg.axis() 
 
    .scale(y) 
 
    .ticks(yTicks) 
 
    .tickFormat('') 
 
    .outerTickSize(0) 
 
    .orient("right"); 
 

 
var line = d3.svg.line() 
 
    .x(function(d) { return x(d.grade); }) 
 
    .y(function(d) { return y(d.bin); }); 
 

 
var svg = d3.select("body").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 + ")"); 
 

 
var data = [{"grade":1,"bin":0.0398,"number":14943,"total":3.2306},{"grade":2,"bin":0.0605,"number":14128,"total":3.3778},{"grade":3,"bin":0.0777,"number":13590,"total":3.4621},{"grade":4,"bin":0.103,"number":13147,"total":3.7474},{"grade":5,"bin":0.1207,"number":12936,"total":3.7055},{"grade":6,"bin":0.202,"number":12857,"total":5.2757},{"grade":7,"bin":0.2534,"number":12962,"total":5.7908},{"grade":8,"bin":0.2561,"number":13362,"total":5.7759},{"grade":9,"bin":0.1873,"number":16618,"total":5.8429},{"grade":10,"bin":0.168,"number":14996,"total":5.4448},{"grade":11,"bin":0.1178,"number":13119,"total":4.3997},{"grade":12,"bin":0.0605,"number":12061,"total":3.8986}]; 
 

 
    var xExtent = d3.extent(data, function(d) { return d.grade; }), 
 
     xRange = xExtent[1] - xExtent[0], 
 
     yExtent = d3.extent(data, function(d) { return d.bin; }), 
 
     yRange = yExtent[1] - yExtent[0]; 
 

 
    x.domain([xExtent[0] - (xRange * .05), xExtent[1] + (xRange * .05)]); 
 
    y.domain([yExtent[0] - (yRange * .05), yExtent[1] + (yRange * .05)]); 
 

 
    svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(xAxisBot) 
 
    .append("text") 
 
     .attr("class", "label") 
 
     .attr("x", width/2) 
 
     .attr("y", 28) 
 
     .style("text-anchor", "end") 
 
     .text("Grade"); 
 

 
    svg.append("g") 
 
     .attr("class", "x axis") 
 
     .call(xAxisTop); 
 

 
    svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxisLeft) 
 
    .append("text") 
 
     .attr("class", "label") 
 
     .attr("transform", "rotate(-90)") 
 
     .attr("y", -40) 
 
     .attr("x", -(height/5)) 
 
     .attr("dy", ".71em") 
 
     .style("text-anchor", "end") 
 
     .text("Proportion of Students Suspended at Least Once"); 
 

 
    svg.append("g") 
 
     .attr("class", "y axis") 
 
     .attr("transform", "translate(" + width + ", 0)") 
 
     .call(yAxisRight); 
 

 
    svg.append("path") 
 
     .datum(data) 
 
     .attr("class", "line") 
 
     .attr("d", line) 
 
     .style("fill", "none") 
 
     .style("stroke", "#3B3A35") 
 
     .style("stroke-width", "1.5px"); 
 

 

 

 
    svg.selectAll(".dot") 
 
     .data(data) 
 
     .enter().append("circle") 
 
     .attr("class", "dot") 
 
     .attr("r", function(d) { return 10; }) 
 
     .attr("cx", function(d) { return x(d.grade); }) 
 
     .attr("cy", function(d) { return y(d.bin); }) 
 
     .attr("transform", "translate(0, 0)") 
 
     .on("mouseover", function(d) { 
 

 
      //Get this bar's x/y values, then augment for the tooltip 
 
      var xPosition = parseFloat(d3.select(this).attr("cx")) + 0; 
 
      var yPosition = parseFloat(d3.select(this).attr("cy")) + 0; 
 

 
     d3.select(this) 
 
      .transition() 
 
      .duration(500) 
 
      .style("fill-opacity", .35) 
 
      .attr("r", 20) 
 
     }) 
 
     .on("mouseout", function() { 
 
      //Hide the tooltip 
 
      d3.select(this) 
 
      .transition() 
 
      .duration(500) 
 
      .style("fill-opacity", 1) 
 
      .attr("r", function(d) { return 10; }); 
 
     })  
 
     .style("fill", "#3B3A35") 
 
     .style("stroke", "#3B3A35") 
 
     .style("stroke-width", "1.2px"); 
 
</script> 
 
</body> 
 
</html>

Nguồn

2016-01-20 00:50:29 Mark

Cảm ơn. Điều này không chính xác những gì tôi muốn. –

Chèn đệm sao cho các điểm không trùng với y hoặc x-trục

Trả lời

Các vấn đề liên quan