d3-cookbook-v2's People
Forkers
geanttechnology eduardocasanova clholzin alelom mtclass williambenjamin sjklein devdataanalyst naniw ox1d0 shi27feng sluv xituo ambaj beastneedsmoretorque octaviom santhoshsoundar carloswilsonperez andymaheshw qiuzhanghua hozblok zhangming870 hasaninho knighton910 jalaz plusm klejman davo netoasis stupidanimal lawlex damianmcnulty ptrbodnar arnabroy dacarab azcvcza avtaylor vu2lid 00paul muttman1357 shortwavedave nobullpleb linlinnb d-sanderson lemorlalala ghrhomeebook emes995 and0429 huang-xy18 aibotian ghlovetongtong cantoria zhaiyuzhai sdli jishuaijian dugzzuli raae hui0409 jiangwuxin lyj199744 lining200 color-of-code icodebender nathangeology blithe6317 aabeben xujinxing gechunqiang zhxll weishell anranxu 12301079-qianwenshu pedroppp lyshiweiyuan zyyecjtu wyzgo hongze081100 jungleyang68 scqilin rambo2015 yucheng-li nsakhnini jsweber mrcrazyleo greatbiglummox tsaijie puhuipuhui fanhonglin zolagz zhangxu0917 egiev fc88804dotcn javascript-cxb chaifuling feitianxiaoxiao kinggggg frantisek901 keeplearningandtryingd3-cookbook-v2's Issues
a question about the enter-update-remove
hello, recently , I am reading the d3-cookbook, which is a wonderful book. However it used the d3 v3.
I try to fix it to d3 v4 to work well. Then I find the repo. It' s cool. But I learned a lot from my fix.
However, When I change the code about pie-chart.html in chapter9. If i don't change the code in A line and use the slices.enter()
,it will not show the chart correctly(click update will work). I find your d3-cookbook-v2 works well with using the slices.enter()
. I think that update can't use the var slices
because the slices
is the reference? I am a little confused about the use of var xxx = selection.data(data) ... xxx.enter()... xxx.transition()...
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pie Chart</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript" src="d3.js"></script>
</head>
<body>
<script type="text/javascript">
function pieChart() {
var _chart = {};
var _width = 500, _height = 500,
_data = [],
_colors = d3.scaleOrdinal().range(d3.schemeCategory20),
_svg,
_bodyG,
_pieG,
_radius = 200,
_innerRadius = 100;
_chart.render = function () {
if (!_svg) {
_svg = d3.select("body").append("svg")
.attr("height", _height)
.attr("width", _width);
}
renderBody(_svg);
};
function renderBody(svg) {
if (!_bodyG)
_bodyG = svg.append("g")
.attr("class", "body");
renderPie();
}
function renderPie() {
var pie = d3.pie()
.sort(function (d) {
return d.id;
})
.value(function (d) {
return d.value;
});
var arc = d3.arc()
.outerRadius(_radius)
.innerRadius(_innerRadius);
if (!_pieG)
_pieG = _bodyG.append("g")
.attr("class", "pie")
.attr("transform", "translate("
+ _radius
+ ","
+ _radius + ")");
renderSlices(pie, arc);
renderLabels(pie, arc);
}
function renderSlices(pie, arc) {
var slices = _pieG.selectAll("path.arc")
.data(pie(_data));
_pieG.selectAll("path.arc").data(pie(_data)) //-----------------> A
.enter()
.append("path")
.attr("class", "arc")
.attr("fill", function (d, i) {
return _colors(i);
});
_pieG.selectAll("path.arc").data(pie(_data)) //-----------------> A
.transition()
.attrTween("d", function (d) {
var currentArc = this.__current__;
if (!currentArc)
currentArc = {startAngle: 0,
endAngle: 0};
var interpolate = d3.interpolate(
currentArc, d);
this.__current__ = interpolate(1);
return function (t) {
return arc(interpolate(t));
};
});
}
function renderLabels(pie, arc) {
var labels = _pieG.selectAll("text.label")
.data(pie(_data));
_pieG.selectAll("text.label")
.data(pie(_data)).enter()
.append("text")
.attr("class", "label");
_pieG.selectAll("text.label")
.data(pie(_data))
.transition()
.attr("transform", function (d) {
return "translate("
+ arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function (d) {
return d.data.id;
});
}
_chart.width = function (w) {
if (!arguments.length) return _width;
_width = w;
return _chart;
};
_chart.height = function (h) {
if (!arguments.length) return _height;
_height = h;
return _chart;
};
_chart.colors = function (c) {
if (!arguments.length) return _colors;
_colors = c;
return _chart;
};
_chart.radius = function (r) {
if (!arguments.length) return _radius;
_radius = r;
return _chart;
};
_chart.innerRadius = function (r) {
if (!arguments.length) return _innerRadius;
_innerRadius = r;
return _chart;
};
_chart.data = function (d) {
if (!arguments.length) return _data;
_data = d;
return _chart;
};
return _chart;
}
function randomData() {
return Math.random() * 9 + 1;
}
function update() {
for (var j = 0; j < data.length; ++j)
data[j].value = randomData();
chart.render();
}
var numberOfDataPoint = 6,
data = [];
data = d3.range(numberOfDataPoint).map(function (i) {
return {id: i, value: randomData()};
});
var chart = pieChart()
.radius(200)
.innerRadius(100)
.data(data);
chart.render();
</script>
<div class="control-group">
<button onclick="update()">Update</button>
</div>
</body>
</html>
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.