0

the x axis and the y axis depends on the values given in the array every one of them starts from the value min and stop in the value max. Can we change the segmentation to be independent from the user values?

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
font: 10px sans-serif;
}

.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

.point {
 fill: steelblue;
stroke: #000;
}

</style>
<body>
<script src="http://d3js.org/d3.v2.js?2.9.6"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

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

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

 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 + ")");

d3.csv("data.csv", function(data) {

 // Coerce the strings to numbers.
data.forEach(function(d) {
d.x = +d.x;
d.y = +d.y;
});

// Compute the scales’ domains.
x.domain(d3.extent(data, function(d) { return d.x; })).nice();
y.domain(d3.extent(data, function(d) { return d.y; })).nice();

// Add the x-axis.
 svg.append("g")
.attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(d3.svg.axis().scale(x).orient("bottom"));

// Add the y-axis.
svg.append("g")
.attr("class", "y axis")
 .call(d3.svg.axis().scale(y).orient("left"));

 // Add the points!
 svg.selectAll(".point")
 .data(data)
 .enter().append("path")
  .attr("class", "point")
  .attr("d", d3.svg.symbol().type("triangle-up"))
  .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
  });

 </script>

The file:data.cvs

x,y
5,90
25,30
45,50
65,55
85,25
4

1 回答 1

1

我认为您询问是否可以设置自定义刻度范围，或者是否可以为每个轴设置自定义范围。好吧，答案是一样的。

您可以使用自定义刻度线axis.tickValues([custom range of values)]。

您可以在域调用中为轴设置自定义范围。您可以使用自定义范围 [0,100] 例如发布在vida.io上方以及jsbin中，所以.domain([0,100]). 在 jsbin 中，还有其他几种方法可以自定义注释掉的轴范围。只需打开它们并重新加载以查看它们的作用。不要忘记在右上角使用 js 进行运行。

对数据使用 d3.extent 会返回评估器中指定的数组的最大值和最小值。

希望这能回答你的问题。

于 2013-09-17T12:09:49.487 回答