Son zamanlarda NVD3 grafiklerini kullanmaya başladım ve Highcharts gibi yakınlaştırma seçeneklerine sahip olmayı seviyorum. Mümkün mü?Highcharts'taki gibi NVD3 grafiklerinde yakınlaştırma seçeneğine sahip olmak mümkün mü?
8
A
cevap
5
nv.models.lineWithFocusChart()
kullanan bir "Çizgi Bulucu ile Çizgi Grafik" var. Bu grafik türü, yakınlaştırmak için kullanabilir ve grafiği kaydırabilirsiniz ana grafiğinin altında ek bir "mini harita" spor:
1
Sen nvd3 grafiğe bu işlevi geçerli olabilir. Highcharts'da olduğu gibi yakınlaştırmaya yardımcı olmak için sürüklenebilir bir kutu oluşturmaz ancak burada gösterildiği gibi fare kaydırma ile yakınlaştırmaya izin verir: pan+zoom example. Pürüzsüz yakınlaştırma elde etmek için nvd3'teki geçişleri/gecikmeleri kaldırmanız gerekecektir. Şimdilik, bunu nvd3 kaynak dosyasını değiştirerek elle yapmanız gerekebilir. Bu konuda here bir tartışma var. Bir jsfiddle.
function addZoom(options) {
// scaleExtent
var scaleExtent = 10;
// parameters
var yAxis = options.yAxis;
var xAxis = options.xAxis;
var xDomain = options.xDomain || xAxis.scale().domain;
var yDomain = options.yDomain || yAxis.scale().domain;
var redraw = options.redraw;
var svg = options.svg;
var discrete = options.discrete;
// scales
var xScale = xAxis.scale();
var yScale = yAxis.scale();
// min/max boundaries
var x_boundary = xScale.domain().slice();
var y_boundary = yScale.domain().slice();
// create d3 zoom handler
var d3zoom = d3.behavior.zoom();
// fix domain
function fixDomain(domain, boundary) {
if (discrete) {
domain[0] = parseInt(domain[0]);
domain[1] = parseInt(domain[1]);
}
domain[0] = Math.min(Math.max(domain[0], boundary[0]), boundary[1] - boundary[1]/scaleExtent);
domain[1] = Math.max(boundary[0] + boundary[1]/scaleExtent, Math.min(domain[1], boundary[1]));
return domain;
};
// zoom event handler
function zoomed() {
yDomain(fixDomain(yScale.domain(), y_boundary));
xDomain(fixDomain(xScale.domain(), x_boundary));
redraw();
};
// zoom event handler
function unzoomed() {
xDomain(x_boundary);
yDomain(y_boundary);
redraw();
d3zoom.scale(1);
d3zoom.translate([0,0]);
};
// initialize wrapper
d3zoom.x(xScale)
.y(yScale)
.scaleExtent([1, scaleExtent])
.on('zoom', zoomed);
// add handler
svg.call(d3zoom).on('dblclick.zoom', unzoomed);
};
// here chart is your nvd3 model
addZoom({
xAxis : chart.xAxis,
yAxis : chart.yAxis,
yDomain: chart.yDomain,
xDomain: chart.xDomain,
redraw : function() { chart.update() },
svg : svg
});
İlgili konular
- 1. ng-dahil seçenek seçeneğine sahip olmak mümkün mü?
- 2. Rcharts nvd3 2-D zoom mümkün mü?
- 3. Birden fazla başlatıcıya sahip olmak mümkün mü?
- 4. Aynı ada sahip iki özelliğe sahip olmak mümkün mü?
- 5. Android'de birden fazla dize kaynak dosyasına sahip olmak mümkün mü?
- 6. Android uygulamaları için animasyonlu başlatıcı ikonlarına sahip olmak mümkün mü?
- 7. MATLAB'de tekrarlayan bir anonim fonksiyona sahip olmak mümkün mü?
- 8. Java'da imzasız bir ByteBuffer'a sahip olmak mümkün mü?
- 9. Bir TextClock'un string değerine sahip olmak mümkün mü?
- 10. ngFor'da shorthand yerel değişkenine sahip olmak mümkün mü?
- 11. Uygulama sunucusu olmadan JMS sunucusuna sahip olmak mümkün mü?
- 12. Birden çok satırlı tableless seçime sahip olmak mümkün mü?
- 13. Değişen uzunluktaki bir tuple vektörüne sahip olmak mümkün mü? Böyle
- 14. Ülkeye göre birden çok APK desteğine sahip olmak mümkün mü?
- 15. Bir veritabanından kod indirip uygulamanın kendisine aitmiş gibi yürütebilen bir işleve sahip olmak mümkün mü?
- 16. Java gibi özel GUI oluşturmak mümkün mü?
- 17. Kaydırma/yakınlaştırma yaparken MKMapView bölgesini sürekli takip etmek mümkün mü?
- 18. Hem yarı saydam hem de tamamen şeffaf bir Windows formuna sahip olmak mümkün mü?
- 19. Belirli bir veri kümesi için birden çok geçerli BST'ye sahip olmak mümkün mü?
- 20. R grafiklerinde
- 21. Symfony2, Bir denetleyicide bir eylem için iki yola sahip olmak mümkün mü?
- 22. Bir Oyun Merkezi "En İyi" Liderlik Tablosuna sahip olmak mümkün mü?
- 23. Asansörde MegaProtoUser seçeneğine alternatif
- 24. Phonegap Uygulama menüsünden "ayarlar" sayfasına sahip olmak nasıl mümkün olabilir?
- 25. ARKit - Vuforia gibi nesneleri izlemek mümkün mü?
- 26. jQuery UI'ye güvenmeksizin AngularJS ile sürükle ve bırak işlevine sahip olmak mümkün mü?
- 27. Birden çok PyPlot penceresine sahip olmak mümkün mü? Yoksa subplots ile sınırlı mıyım?
- 28. HTML5'te birden çok veri- {name} özelliğine sahip olmak mümkün mü?
- 29. Android - Aynı anda 3G ve Wifi bağlantılarına sahip olmak mümkün mü?
- 30. Tek bir alanda bir projeye sahip olmak ve iki çerçeveyi kullanmak mümkün mü (Yii ve Yii2)?
Bağlantı bozuk – Ofiris
Teşekkürler, düzeltildi. –
Dağılım grafikleri için böyle bir özellik var mı? Yoksa, nasıl ekleyebiliriz? – Dinesh