Câu hỏi Làm thế nào tôi có thể nhận được các dấu và vị trí trục D3.js như một mảng?


Tôi thường đặt các dấu của tôi trên trục bằng cách sử dụng svg này:

d3.svg.axis().scale(xScale(width)).ticks(4)

Có thể nhận được các giá trị đánh dấu này và các tọa độ svg của chúng để tôi có thể sử dụng một trục tùy chỉnh bên ngoài svg bằng cách sử dụng d3.svg.axis() ?


22
2018-03-28 20:49


gốc


Bạn sẽ nhận được chúng nếu bạn gọi xScale.ticks(). - Lars Kotthoff


Các câu trả lời:


Vâng, xScale.ticks(4) nên cung cấp cho bạn điểm đánh dấu thực tế dưới dạng giá trị và bạn có thể đưa những điểm đó trở lại thông qua xScale đến vị trí X. Bạn cũng có thể kéo các điểm đánh dấu trở lại từ các phần tử được tạo sau khi bạn áp dụng trục cho một phần tử thực tế:

var svg = d3.select("svg");

var scale = d3.scale.linear()
    .range([20, 280])
    .domain([0, 100])

var axis = d3.svg.axis().scale(scale).orient("bottom").ticks(9);
// grab the "scale" used by the axis, call .ticks()
// passing the value we have for .ticks()
console.log("all the points", axis.scale().ticks(axis.ticks()[0]));
// note, we actually select 11 points not 9, "closest guess"

// paint the axis and then find its ticks
svg.call(axis).selectAll(".tick").each(function(data) {
  var tick = d3.select(this);
  // pull the transform data out of the tick
  var transform = d3.transform(tick.attr("transform")).translate;

  // passed in "data" is the value of the tick, transform[0] holds the X value
  console.log("each tick", data, transform);
});

jsbin


26
2018-03-29 21:23



Tương đương v4 là gì? - SumNeuron
Tôi chưa chắc chắn bản thân mình, tôi đã không phải giải quyết vấn đề này, nhưng nếu ai đó có một equiv v4, xin vui lòng chỉnh sửa / sửa đổi câu trả lời. - gnarf
Phụ lục được chèn để nhận tickValues ​​với v4. - Craig
Câu trả lời cho câu trả lời là D4 v4 (tldc; đó là axis.scale().ticks(), hoặc chỉ someScaleObject.ticks() if the scale obj is accessible) - user568458