Проблема с масштабированием внутри диаграммы d3.js

Я использую d3.js, и он отлично работает. Но я не понимаю, как вставить масштабирование. Я использую фрагмент, чтобы закрепить масштаб внутри диаграммы.Проблема с масштабированием внутри диаграммы d3.js

это мой код:

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

body { 
    font: 10px sans-serif; 
} 

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

.dot { 
    stroke: #35353a; 
} 

</style> 
<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
<script> 

var margin = {top: 40, right: 50, bottom: 60, left: 70}, 
    width = 1060 - margin.left - margin.right, 
    height = 700 - margin.top - margin.bottom; 



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

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

var color = d3.scale.category10(); 


var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

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.tsv("data/test.tsv", function(error, data) { 
    if (error) throw error; 

    data.forEach(function(d) { 
    d.y = +d.y; 
    d.x = +d.x; 
    }); 

    x.domain(d3.extent(data, function(d) { return d.x; })).nice(); 
    y.domain(d3.extent(data, function(d) { return d.y; })).nice(); 

    svg.append("rect") 
    .style('fill', 'transparent') 
    .attr("width", width) 
    .attr("height", height); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .append("text") 
     .attr("class", "label") 
     .attr("x", width) 
     .attr("y", -6) 
     .style("text-anchor", "end") 
     .text("1° Principal Component"); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("class", "label") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("2° Principal Component") 

    svg.selectAll(".dot") 
     .data(data) 
    .enter().append("circle") 
     .attr("class", "dot") 
     .attr("r", 3.5) 
     .attr("cx", function(d) { return x(d.x); }) 
     .attr("cy", function(d) { return y(d.y); }) 
     .style("fill", function(d) { return color(d.cluster); }); 

    var legend = svg.selectAll(".legend") 
     .data(color.domain()) 
    .enter().append("g") 
     .attr("class", "legend") 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

    legend.append("rect") 
     .attr("x", width - 18) 
     .attr("width", 18) 
     .attr("height", 18) 
     .style("fill", color); 

    legend.append("text") 
     .attr("x", width - 24) 
     .attr("y", 9) 
     .attr("dy", ".35em") 
     .style("text-anchor", "end") 
     .text(function(d) { return d; }); 

}); 

</script>

, если вставить код, чтобы увеличить, я не в состоянии увидеть график снова:

var zoom = d3.behavior.zoom() 
    .scaleExtent([1, 10]) 
    .on("zoom", zoomed); 

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.right + ")") 
    .call(zoom);-> add zoom to svg 

function zoomed() { 
    container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
}

, что случилось?

маленький фрагмент TSV:

x y cluster 
-1.0403321821456555 -0.9975352942962847 1 Cluster 
-1.0404728255519613 -1.0021499065423058 1 Cluster 
-1.0405312135780753 -1.0036348433263207 1 Cluster 
-1.0405417259454817 -0.9883123582794969 1 Cluster 
-1.0406344016908704 -0.9988259809896288 1 Cluster 
-1.0406850822323188 -1.004030268612692 1 Cluster 
-1.0406958447337742 -1.0065636473623911 1 Cluster 
-1.0408667295862442 -1.0046081788513885 1 Cluster 
-1.0408845367165218 -0.995137367062602 1 Cluster 
-1.040932294864444 -0.991519347648691 1 Cluster 
-1.040976952803462 -0.9833995692226501 1 Cluster 
-1.0409896369345166 -0.9951495809699621 1 Cluster 
-1.0410051379794218 -0.99448305469843 1 Cluster 
-1.0410265061033306 -0.9951333768928067 1 Cluster 
-1.0410330574179099 -0.9949308462686461 1 Cluster 
-1.0410357249485886 -1.0053243527321372 1 Cluster 
-1.0410491702402065 -1.006726904241483 1 Cluster 
-1.041049812593761 -0.9865506278675225 1 Cluster 
-1.0410667719605575 -0.9911033214658317 1 Cluster 
-1.0411116340142055 -0.9735253204825465 1 Cluster

спасибо заранее.

источник

2015-09-16 OiRc

Вы также можете разместить содержимое ur tsv – Cyril

@ Кирилл только что отредактировал – OiRc

Я играю слеп здесь, как я не имею бегущую код:

function zoomed() { 
    container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
}

это должно было быть:

function zoomed() { 
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
}

Объяснение: Я вижу, что код не имеет контейнер ... traslate должен быть в группе g, присоединенной к svg

источник

2015-09-16 11:29:21 Cyril

спасибо ... это была ошибка отвлечения. в настоящее время работает! есть ли способ увеличить/уменьшить элементы внутри сюжета, вместо графика? – OiRc

Здесь мы масштабируем полный g или группу, которая содержит полный график. для какого-то определенного g, на который вы хотите добавить масштаб, добавьте масштаб трансляции вызова к этому элементу. – Cyril

Можете ли вы предоставить мне небольшой пример ?, если я хочу увеличить элементы, скажем, как jfreechart .. – OiRc

Проблема с масштабированием внутри диаграммы d3.js

ответ

Смежные вопросы