用d3製作交互式散點圖？

我有一個基於此示例http://bl.ocks.org/mbostock/3887118散點圖。用d3製作交互式散點圖？

我想要做的是通過允許用戶選擇x和y尺寸以及基於數據文件中某一列的圓圈大小來添加交互性。當他們選擇一些東西時，圖表應該自動縮放軸線。

我該如何去做這件事？這是我的代碼到目前爲止：http://plnkr.co/edit/ZCdEBa79Y85Koz7MepXw?p=preview

謝謝。

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

/*set the axis line color, dot stroke, font size, and font position*/ 
body { 
    font: 15px sans-serif; 
} 

.name{ 
    position: relative; 
    top: 90px; 
    text-align: left; 
    font-weight: bold; 
} 

.title { 
    position: relative; 
    text-align: left; 
    font-size: 25px; 
} 

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

.dot { 
    stroke: #000; 
} 

#filter { 
    position: absolute; 
} 

#mark { 
    padding-left: 150px; 
    position: inherit; 
} 

#xAXs { 
    position: relative; 
    left: 290px; 
    bottom: 30px; 
} 

#yAXs { 
position: relative; 
bottom: 30px; 
left: 315px; 

} 

#label { 
position: absolute; 
top: 599px; 
bottom: 125px; 
left: 300px; 
right: 0px; 
} 

#label2 { 
position: absolute; 
top: 599px; 
bottom: 125px; 
left: 430px; 
right: 0px; 
} 

</style> 

<body> 


<script src="d3.min.js"></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 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.csv("iris.csv", function(error, data) { 
    data.forEach(function(d) { 
    d.petalLength = +d.petalLength; 
    d.petalWidth = +d.petalWidth; 
    d.sepalLength = +d.sepalLength; 
    d.sepalWidth = +d.sepalWidth; 
    }); 

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

    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("Petal Width (cm)"); 

    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("Petal Length (cm)") 

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


    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; }); 



    d3.selectAll("[name=v]").on("change", function() { 
     var selected = this.value; 
     display = this.checked ? "inline" : "none"; 


    svg.selectAll(".dot") 
     .filter(function(d) {return selected == d.species;}) 
     .attr("display", display); 
     }); 



    d3.selectAll("[name=sepal]").on("change", function(d) { 
    radius = this.value; 


    svg.selectAll(".dot") 
    console.log(radius); 
    circles.attr("r", radius); 
    }); 



    d3.select("[name=xAX]").on("change", function(){ 
    xAxy = this.value; 
    console.log(xAxy) 
    }) 

    d3.select("[name=yAX]").on("change", function(){ 
    yAxy = this.value; 
    console.log(yAxy) 
    }) 

}); 

</script> 
<br><br> 


    <div id="filter"> 
    <b>Species Filter:</b> 
     <br> 
    <input name='v' value="Iris-setosa" type="checkbox" checked>Iris-setosa 
    </input> 
     <br> 
    <input name="v" value="Iris-versicolor" type="checkbox" checked >Iris-versicolor 
    </input> 
     <br> 
    <input name="v" value="Iris-virginica" type="checkbox" checked >Iris-virginica 
    </input> 
    </div> 


    <form id="mark"> 
    <b>Size of Mark:</b> 
    <div><input type="radio" name="sepal" value='sepalWidth'>Sepal Width</div> 
    <div><input type="radio" name="sepal" value="sepalLength">Sepal Length</div> 
    </form> 

<div id="label"><b>x-Axis:</b></div> 
    <select name="xAX" id="xAXs"> 
     <option value ="petalWidth">petalWidth</option> 
     <option value ="petalLength">petalLength</option> 
     <option value ="sepalLength">sepalLength</option> 
     <option value ="sepalWidth">sepalWidth</option> 
    </select> 

<div id="label2"><b>y-Axis:</b></div> 
    <select name="yAX" id="yAXs"> 
     <option value ="petalLength">petalLength</option> 
     <option value ="petalWidth">petalWidth</option> 
     <option value ="sepalLength">sepalLength</option> 
     <option value ="sepalWidth">sepalWidth</option> 
    </select> 

    <br> 
</body>

來源

2015-02-09 Lurker

試試這個plunkr：http://plnkr.co/edit/MkZcXJPS7hrcWh3M0MZ1?p=preview

你是幾乎沒有，我剛更新了幾個自己的函數。下面介紹的亮點：

d3.selectAll("[name=sepal]").on("change", function(d) { 
    radius = this.value; 

    svg.selectAll(".dot") 
    console.log(radius); 
    circles.attr("r", function(d) { return d[radius]; }); 
});

要設置radius到要讀半徑CSV列，所以現在你只需要更新你的社交圈半徑在svg，這是基本上和你最初設置時一樣。

d3.select("[name=xAX]").on("change", function(){ 
    xAxy = this.value; 
    console.log(xAxy) 
    x.domain(d3.extent(data, function(d) { return d[xAxy]; })).nice(); 

    svg.select(".x.axis").transition().call(xAxis); 

    svg.selectAll(".dot").transition().attr("cx", function(d) { 
     return x(d[xAxy]); 
    }); 
    svg.selectAll(".x.axis").selectAll("text.label").text(axisNames[xAxy] + " (cm)"); 
}); 

d3.select("[name=yAX]").on("change", function(){ 
    yAxy = this.value; 
    console.log(yAxy) 
    y.domain(d3.extent(data, function(d) { return d[yAxy]; })).nice(); 
    svg.select(".y.axis").transition().call(yAxis); 
    svg.selectAll(".dot").transition().attr("cy", function(d) { 
     return y(d[yAxy]); 
    }); 
    svg.selectAll(".y.axis").selectAll("text.label").text(axisNames[yAxy] + " (cm)"); 
});

爲x和y軸的變化基本上是彼此相同的，與被引用只是軸線得到改變。在這裏我做：

更新與新的範圍中的域（基於xAxy或yAxy值）
更新在svg實際軸通過建立一個過渡並調用xAxis或yAxis組件。
更新每個.dot
更新text在軸上通過在一個新的數組（axisNames）查找它的cx或cy位置這給該變量的一個相當打印被作圖。

來源

2015-02-09 22:54:35

你的問題是問很多。通常動態d3可視化遵循輸入，退出和更新模式。有一些great tutorial's在那裏讓你開始。

要修復您的特定代碼，您分爲三部分。第一初始化圖的非更新-能夠部分：

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 500 - 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 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").insert("svg",":first-child") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

// keep reference to axises 
var xg = svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")"); 
xg 
    .append("text") 
    .attr("class", "label") 
    .attr("x", width) 
    .attr("y", -6) 
    .style("text-anchor", "end"); 

var yg = svg.append("g") 
     .attr("class", "y axis"); 
yg 
    .append("text") 
    .attr("class", "label") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end"); 

// legend is always static 
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; });

然後，在功能包住更新能夠部分：

function update(){ 

    // get user selections 
    var xVar = d3.select('#xAXs').node().value, 
    yVar = d3.select('#yAXs').node().value; 

    var checks = {}; 
    d3.selectAll('input[type=checkbox]').each(function(){ 
    checks[this.value] = this.checked; 
    }); 

    var radAttr = d3.select('input[type=radio]:checked').node().value; 

    // filter data based on user selections 
    var data = baseData.filter(function(d,i){ 
    d.x = d[xVar]; // create/modify a x,y so that d3 will know it's an update 
    d.y = d[yVar]; 
    return checks[d.species]; 
    }); 

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

    xg.call(xAxis); 
    yg.call(yAxis); 

    xg.select("text").text(xVar); 
    yg.select("text").text(yVar); 

    // on enter 
    var circles = svg.selectAll(".dot") 
    .data(data); 

    circles.enter() 
    .append("circle") 
    .attr("class", "dot"); 

    circles.exit().remove(); 

    // on update 
    circles.attr("cx", function(d) { return x(d.x); }) 
    .attr("cy", function(d) { return y(d.y); }) 
    .style("fill", function(d) { return color(d.species); }) 
    .attr("r", function(d){ return d[radAttr]; }); 
}

最後觸發用戶動作更新：

d3.selectAll('select').on('change',function(){ 
    update(); 
}); 

d3.selectAll('input').on('click', function(){ 
    update(); 
})

這是一個example把它放在一起。

來源

2015-02-09 22:51:25 Mark

用d3製作交互式散點圖？

回答

相關問題