2013-10-08 8 views
9

Chcę narysować oś z dużymi i drobnymi kleszczami stylizowanymi w różny sposób.Major i minor ticks z V3 z D3?

Ten przykład: http://bl.ocks.org/vjpgo/4689130 robi z grubsza to, co chcę, ale nie mogę go uruchomić z V3 z D3.

Czy jest to przestarzała metoda? Nie widzę go w obecnej dokumentacji: https://github.com/mbostock/d3/wiki/SVG-Axes

Jeśli tak, jakie jest najlepsze podejście do rysowania dużych i małych tyknięć w V3 w D3? Czy powinienem narysować dwie całkowicie różne osie?

+0

Yep amortyzacji, jak zaznaczono [tutaj] (https://github.com/mbostock/d3/releases/tag/v3.3.0) – user1614080

Odpowiedz

19

Najnowsza wersja nie oferuje niczego, co mogłoby narysować drobne takty jak w poprzednich wersjach, ale nie ma potrzeby rysowania innej osi, aby osiągnąć to, co chcesz. Możesz użyć skali, aby wygenerować dodatkowe tiki, a następnie użyć znanego wzoru .data(), aby narysować linie dla tych, dla których nie istnieją już linie.

xaxisg.selectAll("line").data(x.ticks(64), function(d) { return d; }) 
    .enter() 
    .append("line") 
    .attr("class", "minor") 
    .attr("y1", 0) 
    .attr("y2", -60) 
    .attr("x1", x) 
    .attr("x2", x); 

xaxisg jest kontenerem, do którego oś została narysowana wcześniej. Skala jest używana do generowania wymaganej liczby znaczników, a dopasowywanie odbywa się przez same dane. Oznacza to, że nie zostaną narysowane żadne dodatkowe tiknięcia dla tych, które już istnieją, gdy wybrano opcję .enter().

Kompletny jsfiddle here.

+0

To jest wspaniałe, dziękuję. – Richard