異なるグラフ（たとえば、1つの円弧グラフ、1つの領域グラフ、カレンダービューなど）を持つダッシュボードがあるとします。そのカレンダービューのある日（例：5月26日）にカーソルを合わせると、その瞬間のダッシュボードにある他のグラフに、カレンダーグラフに表示された日に関連付けられた情報が表示されます情報があると、何も起こらない）。これは私が選択した他のグラフにも当てはまります。異なるグラフのD3jsツールチップ
ダッシュボードで何が起こっているのかを知るこのタイプの動的ツールチップは、どのようにして得られますか？
あなたが望むものは、アクションが相互に実行されたときに相互に反応する相互接続されたコンポーネントです。
は、あなたが望む任意のアクションをトリガーする
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", clicked)
イベントを使用する：あなたは、次さを何ができるか
。
、あなたがどこかに定義する必要がありclick、mouseoverまたはmouseout関数内で、あなたは他のチャートに影響を与えるスタイル/データへの変更（すなわち、棒グラフ上の特定のバーなどを強調する）
を行う必要がありますhereからコピー/ペーストされた次の例を参照してください。私は後世のコードを再作成しました。
ここのキーはupの機能です。これは、他のすべてのツールチップを更新し、変更を反映させたい場所です。この例では、グラフ全体が変更されることに注意してください。あなたはおそらく、表示しようとしているツールチップを更新するためにその関数を適応させることができます。
必要なチャート/フォームを使用して、自分のニーズに合わせて調整する必要があります。
var \t formatAsPercentage = d3.format("%"),
\t \t formatAsPercentage1Dec = d3.format(".1%"),
\t \t formatAsInteger = d3.format(","),
\t \t fsec = d3.time.format("%S s"),
\t \t fmin = d3.time.format("%M m"),
\t \t fhou = d3.time.format("%H h"),
\t \t fwee = d3.time.format("%a"),
\t \t fdat = d3.time.format("%d d"),
\t \t fmon = d3.time.format("%b")
\t \t ;
/*
############# PIE CHART ###################
-------------------------------------------
*/
function dsPieChart(){
\t var dataset = [
\t \t \t {category: "Sam", measure: 0.30},
\t {category: "Peter", measure: 0.25},
\t {category: "John", measure: 0.15},
\t {category: "Rick", measure: 0.05},
\t {category: "Lenny", measure: 0.18},
\t {category: "Paul", measure:0.04},
\t {category: "Steve", measure: 0.03}
\t ]
\t ;
\t var \t width = 400,
\t \t height = 400,
\t \t outerRadius = Math.min(width, height)/2,
\t \t innerRadius = outerRadius * .999,
\t \t // for animation
\t \t innerRadiusFinal = outerRadius * .5,
\t \t innerRadiusFinal3 = outerRadius* .45,
\t \t color = d3.scale.category20() //builtin range of colors
\t \t ;
\t
\t var vis = d3.select("#pieChart")
\t .append("svg:svg") //create the SVG element inside the <body>
\t .data([dataset]) //associate our data with the document
\t .attr("width", width) //set the width and height of our visualization (these will be attributes of the <svg> tag
\t .attr("height", height)
\t \t \t .append("svg:g") //make a group to hold our pie chart
\t .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")") //move the center of the pie chart from 0, 0 to radius, radius
\t \t \t \t ;
\t \t \t \t
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
\t .outerRadius(outerRadius).innerRadius(innerRadius);
// for animation
var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
\t var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d) { return d.measure; }); //we must tell it out to access the value of each element in our data array
var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
.attr("class", "slice") //allow us to style things in the slices (like text)
.on("mouseover", mouseover)
\t \t \t \t .on("mouseout", mouseout)
\t \t \t \t .on("click", up)
\t \t \t \t ;
\t \t \t \t
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); }) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc) //this creates the actual SVG path using the associated data (pie) with the arc drawing function
\t \t \t \t \t .append("svg:title") //mouseover title showing the figures
\t \t \t \t .text(function(d) { return d.data.category + ": " + formatAsPercentage(d.data.measure); }); \t \t \t
d3.selectAll("g.slice").selectAll("path").transition()
\t \t \t .duration(750)
\t \t \t .delay(10)
\t \t \t .attr("d", arcFinal)
\t \t \t ;
\t
\t // Add a label to the larger arcs, translated to the arc centroid and rotated.
\t // source: http://bl.ocks.org/1305337#index.html
\t arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; })
\t \t \t .append("svg:text")
\t .attr("dy", ".35em")
\t .attr("text-anchor", "middle")
\t .attr("transform", function(d) { return "translate(" + arcFinal.centroid(d) + ")rotate(" + angle(d) + ")"; })
\t //.text(function(d) { return formatAsPercentage(d.value); })
\t .text(function(d) { return d.data.category; })
\t ;
\t
\t // Computes the label angle of an arc, converting from radians to degrees.
\t \t function angle(d) {
\t \t var a = (d.startAngle + d.endAngle) * 90/Math.PI - 90;
\t \t return a > 90 ? a - 180 : a;
\t \t }
\t \t
\t \t
\t \t // Pie chart title \t \t \t
\t \t vis.append("svg:text")
\t \t .attr("dy", ".35em")
\t .attr("text-anchor", "middle")
\t .text("Revenue Share 2012")
\t .attr("class","title")
\t ; \t \t
\t \t
\t function mouseover() {
\t d3.select(this).select("path").transition()
\t .duration(750)
\t \t \t //.attr("stroke","red")
\t \t \t //.attr("stroke-width", 1.5)
\t \t \t .attr("d", arcFinal3)
\t \t \t ;
\t }
\t
\t function mouseout() {
\t d3.select(this).select("path").transition()
\t .duration(750)
\t \t \t //.attr("stroke","blue")
\t \t \t //.attr("stroke-width", 1.5)
\t \t \t .attr("d", arcFinal)
\t \t \t ;
\t }
\t
\t function up(d, i) {
\t
\t \t \t \t /* update bar chart when user selects piece of the pie chart */
\t \t \t \t //updateBarChart(dataset[i].category);
\t \t \t \t updateBarChart(d.data.category, color(i));
\t \t \t \t updateLineChart(d.data.category, color(i));
\t \t \t
\t }
}
dsPieChart();
/*
############# BAR CHART ###################
-------------------------------------------
*/
var datasetBarChart = [
{ group: "All", category: "Oranges", measure: 63850.4963 },
{ group: "All", category: "Apples", measure: 78258.0845 },
{ group: "All", category: "Grapes", measure: 60610.2355 },
{ group: "All", category: "Figs", measure: 30493.1686 },
{ group: "All", category: "Mangos", measure: 56097.0151 },
{ group: "Sam", category: "Oranges", measure: 19441.5648 },
{ group: "Sam", category: "Apples", measure: 25922.0864 },
{ group: "Sam", category: "Grapes", measure: 9720.7824 },
{ group: "Sam", category: "Figs", measure: 6480.5216 },
{ group: "Sam", category: "Mangos", measure: 19441.5648 },
{ group: "Peter", category: "Oranges", measure: 22913.2728 },
{ group: "Peter", category: "Apples", measure: 7637.7576 },
{ group: "Peter", category: "Grapes", measure: 23549.7526 },
{ group: "Peter", category: "Figs", measure: 1909.4394 },
{ group: "Peter", category: "Mangos", measure: 7637.7576 },
{ group: "John", category: "Oranges", measure: 1041.5124 },
{ group: "John", category: "Apples", measure: 2430.1956 },
{ group: "John", category: "Grapes", measure: 15275.5152 },
{ group: "John", category: "Figs", measure: 4166.0496 },
{ group: "John", category: "Mangos", measure: 11803.8072 },
{ group: "Rick", category: "Oranges", measure: 7406.3104 },
{ group: "Rick", category: "Apples", measure: 2545.9192 },
{ group: "Rick", category: "Grapes", measure: 1620.1304 },
{ group: "Rick", category: "Figs", measure: 8563.5464 },
{ group: "Rick", category: "Mangos", measure: 3008.8136 },
{ group: "Lenny", category: "Oranges", measure: 7637.7576 },
{ group: "Lenny", category: "Apples", measure: 35411.4216 },
{ group: "Lenny", category: "Grapes", measure: 8332.0992 },
{ group: "Lenny", category: "Figs", measure: 6249.0744 },
{ group: "Lenny", category: "Mangos", measure: 11803.8072 },
{ group: "Paul", category: "Oranges", measure: 3182.399 },
{ group: "Paul", category: "Apples", measure: 867.927 },
{ group: "Paul", category: "Grapes", measure: 1808.18125 },
{ group: "Paul", category: "Figs", measure: 795.59975 },
{ group: "Paul", category: "Mangos", measure: 578.618 },
{ group: "Steve", category: "Oranges", measure: 2227.6793 },
{ group: "Steve", category: "Apples", measure: 3442.7771 },
{ group: "Steve", category: "Grapes", measure: 303.77445 },
{ group: "Steve", category: "Figs", measure: 2328.93745 },
{ group: "Steve", category: "Mangos", measure: 1822.6467 },
]
;
// set initial group value
var group = "All";
function datasetBarChosen(group) {
\t var ds = [];
\t for (x in datasetBarChart) {
\t \t if(datasetBarChart[x].group==group){
\t \t \t ds.push(datasetBarChart[x]);
\t \t }
\t \t }
\t return ds;
}
function dsBarChartBasics() {
\t \t var margin = {top: 30, right: 5, bottom: 20, left: 50},
\t \t width = 500 - margin.left - margin.right,
\t height = 250 - margin.top - margin.bottom,
\t \t colorBar = d3.scale.category20(),
\t \t barPadding = 1
\t \t ;
\t \t
\t \t return {
\t \t \t margin : margin,
\t \t \t width : width,
\t \t \t height : height,
\t \t \t colorBar : colorBar,
\t \t \t barPadding : barPadding
\t \t } \t \t \t
\t \t ;
}
function dsBarChart() {
\t var firstDatasetBarChart = datasetBarChosen(group); \t
\t
\t var basics = dsBarChartBasics();
\t
\t var margin = basics.margin,
\t \t width = basics.width,
\t height = basics.height,
\t \t colorBar = basics.colorBar,
\t \t barPadding = basics.barPadding
\t \t ;
\t \t \t \t \t
\t var \t xScale = d3.scale.linear()
\t \t \t \t \t \t .domain([0, firstDatasetBarChart.length])
\t \t \t \t \t \t .range([0, width])
\t \t \t \t \t \t ;
\t \t \t \t \t \t
\t // Create linear y scale
\t // Purpose: No matter what the data is, the bar should fit into the svg area; bars should not
\t // get higher than the svg height. Hence incoming data needs to be scaled to fit into the svg area.
\t var yScale = d3.scale.linear()
\t \t \t // use the max funtion to derive end point of the domain (max value of the dataset)
\t \t \t // do not use the min value of the dataset as min of the domain as otherwise you will not see the first bar
\t \t .domain([0, d3.max(firstDatasetBarChart, function(d) { return d.measure; })])
\t \t // As coordinates are always defined from the top left corner, the y position of the bar
\t \t // is the svg height minus the data value. So you basically draw the bar starting from the top.
\t \t // To have the y position calculated by the range function
\t \t .range([height, 0])
\t \t ;
\t
\t //Create SVG element
\t
\t var svg = d3.select("#barChart")
\t \t \t .append("svg")
\t \t .attr("width", width + margin.left + margin.right)
\t \t .attr("height", height + margin.top + margin.bottom)
\t \t .attr("id","barChartPlot")
\t \t ;
\t
\t var plot = svg
\t \t .append("g")
\t \t .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
\t \t ;
\t
\t plot.selectAll("rect")
\t \t .data(firstDatasetBarChart)
\t \t .enter()
\t \t .append("rect")
\t \t \t .attr("x", function(d, i) {
\t \t \t return xScale(i);
\t \t \t })
\t \t .attr("width", width/firstDatasetBarChart.length - barPadding)
\t \t \t .attr("y", function(d) {
\t \t \t return yScale(d.measure);
\t \t \t })
\t \t \t .attr("height", function(d) {
\t \t \t return height-yScale(d.measure);
\t \t \t })
\t \t \t .attr("fill", "lightgrey")
\t \t \t ;
\t
\t \t
\t // Add y labels to plot \t
\t
\t plot.selectAll("text")
\t .data(firstDatasetBarChart)
\t .enter()
\t .append("text")
\t .text(function(d) {
\t \t \t return formatAsInteger(d3.round(d.measure));
\t })
\t .attr("text-anchor", "middle")
\t // Set x position to the left edge of each bar plus half the bar width
\t .attr("x", function(d, i) {
\t \t \t return (i * (width/firstDatasetBarChart.length)) + ((width/firstDatasetBarChart.length - barPadding)/2);
\t })
\t .attr("y", function(d) {
\t \t \t return yScale(d.measure) + 14;
\t })
\t .attr("class", "yAxis")
\t /* moved to CSS \t \t \t
\t .attr("font-family", "sans-serif")
\t .attr("font-size", "11px")
\t .attr("fill", "white")
\t */
\t ;
\t
\t // Add x labels to chart \t
\t
\t var xLabels = svg
\t \t .append("g")
\t \t .attr("transform", "translate(" + margin.left + "," + (margin.top + height) + ")")
\t \t ;
\t
\t xLabels.selectAll("text.xAxis")
\t \t .data(firstDatasetBarChart)
\t \t .enter()
\t \t .append("text")
\t \t .text(function(d) { return d.category;})
\t \t .attr("text-anchor", "middle")
\t \t \t // Set x position to the left edge of each bar plus half the bar width
\t \t \t \t \t \t .attr("x", function(d, i) {
\t \t \t \t \t \t \t \t return (i * (width/firstDatasetBarChart.length)) + ((width/firstDatasetBarChart.length - barPadding)/2);
\t \t \t \t \t \t })
\t \t .attr("y", 15)
\t \t .attr("class", "xAxis")
\t \t //.attr("style", "font-size: 12; font-family: Helvetica, sans-serif")
\t \t ; \t \t \t
\t
\t // Title
\t
\t svg.append("text")
\t \t .attr("x", (width + margin.left + margin.right)/2)
\t \t .attr("y", 15)
\t \t .attr("class","title") \t \t \t \t
\t \t .attr("text-anchor", "middle")
\t \t .text("Overall Sales Breakdown 2012")
\t \t ;
}
dsBarChart();
/* ** UPDATE CHART ** */
/* updates bar chart on request */
function updateBarChart(group, colorChosen) {
\t
\t \t var currentDatasetBarChart = datasetBarChosen(group);
\t \t
\t \t var basics = dsBarChartBasics();
\t
\t \t var margin = basics.margin,
\t \t \t width = basics.width,
\t \t height = basics.height,
\t \t \t colorBar = basics.colorBar,
\t \t \t barPadding = basics.barPadding
\t \t \t ;
\t \t
\t \t var \t xScale = d3.scale.linear()
\t \t \t .domain([0, currentDatasetBarChart.length])
\t \t \t .range([0, width])
\t \t \t ;
\t \t
\t \t \t
\t \t var yScale = d3.scale.linear()
\t .domain([0, d3.max(currentDatasetBarChart, function(d) { return d.measure; })])
\t .range([height,0])
\t ;
\t
\t var svg = d3.select("#barChart svg");
\t
\t var plot = d3.select("#barChartPlot")
\t \t .datum(currentDatasetBarChart)
\t \t ;
\t
\t \t \t /* Note that here we only have to select the elements - no more appending! */
\t \t plot.selectAll("rect")
\t .data(currentDatasetBarChart)
\t .transition()
\t \t \t .duration(750)
\t \t \t .attr("x", function(d, i) {
\t \t \t return xScale(i);
\t \t \t })
\t \t .attr("width", width/currentDatasetBarChart.length - barPadding)
\t \t \t .attr("y", function(d) {
\t \t \t return yScale(d.measure);
\t \t \t })
\t \t \t .attr("height", function(d) {
\t \t \t return height-yScale(d.measure);
\t \t \t })
\t \t \t .attr("fill", colorChosen)
\t \t \t ;
\t \t
\t \t plot.selectAll("text.yAxis") // target the text element(s) which has a yAxis class defined
\t \t \t .data(currentDatasetBarChart)
\t \t \t .transition()
\t \t \t .duration(750)
\t \t .attr("text-anchor", "middle")
\t \t .attr("x", function(d, i) {
\t \t \t \t return (i * (width/currentDatasetBarChart.length)) + ((width/currentDatasetBarChart.length - barPadding)/2);
\t \t })
\t \t .attr("y", function(d) {
\t \t \t \t return yScale(d.measure) + 14;
\t \t })
\t \t .text(function(d) {
\t \t \t \t return formatAsInteger(d3.round(d.measure));
\t \t })
\t \t .attr("class", "yAxis") \t \t \t \t \t
\t \t ;
\t \t
\t \t svg.selectAll("text.title") // target the text element(s) which has a title class defined
\t \t \t .attr("x", (width + margin.left + margin.right)/2)
\t \t \t .attr("y", 15)
\t \t \t .attr("class","title") \t \t \t \t
\t \t \t .attr("text-anchor", "middle")
\t \t \t .text(group + "'s Sales Breakdown 2012")
\t \t ;
}
/*
############# LINE CHART ##################
-------------------------------------------
*/
var datasetLineChart = [
{ group: "All", category: 2008, measure: 289309 },
{ group: "All", category: 2009, measure: 234998 },
{ group: "All", category: 2010, measure: 310900 },
{ group: "All", category: 2011, measure: 223900 },
{ group: "All", category: 2012, measure: 234500 },
{ group: "Sam", category: 2008, measure: 81006.52 },
{ group: "Sam", category: 2009, measure: 70499.4 },
{ group: "Sam", category: 2010, measure: 96379 },
{ group: "Sam", category: 2011, measure: 64931 },
{ group: "Sam", category: 2012, measure: 70350 },
{ group: "Peter", category: 2008, measure: 63647.98 },
{ group: "Peter", category: 2009, measure: 61099.48 },
{ group: "Peter", category: 2010, measure: 87052 },
{ group: "Peter", category: 2011, measure: 58214 },
{ group: "Peter", category: 2012, measure: 58625 },
{ group: "Rick", category: 2008, measure: 23144.72 },
{ group: "Rick", category: 2009, measure: 14099.88 },
{ group: "Rick", category: 2010, measure: 15545 },
{ group: "Rick", category: 2011, measure: 11195 },
{ group: "Rick", category: 2012, measure: 11725 },
{ group: "John", category: 2008, measure: 34717.08 },
{ group: "John", category: 2009, measure: 30549.74 },
{ group: "John", category: 2010, measure: 34199 },
{ group: "John", category: 2011, measure: 33585 },
{ group: "John", category: 2012, measure: 35175 },
{ group: "Lenny", category: 2008, measure: 69434.16 },
{ group: "Lenny", category: 2009, measure: 46999.6 },
{ group: "Lenny", category: 2010, measure: 62180 },
{ group: "Lenny", category: 2011, measure: 40302 },
{ group: "Lenny", category: 2012, measure: 42210 },
{ group: "Paul", category: 2008, measure: 7232.725 },
{ group: "Paul", category: 2009, measure: 4699.96 },
{ group: "Paul", category: 2010, measure: 6218 },
{ group: "Paul", category: 2011, measure: 8956 },
{ group: "Paul", category: 2012, measure: 9380 },
{ group: "Steve", category: 2008, measure: 10125.815 },
{ group: "Steve", category: 2009, measure: 7049.94 },
{ group: "Steve", category: 2010, measure: 9327 },
{ group: "Steve", category: 2011, measure: 6717 },
{ group: "Steve", category: 2012, measure: 7035 }
]
;
// set initial category value
var group = "All";
function datasetLineChartChosen(group) {
\t var ds = [];
\t for (x in datasetLineChart) {
\t \t if(datasetLineChart[x].group==group){
\t \t \t ds.push(datasetLineChart[x]);
\t \t }
\t \t }
\t return ds;
}
function dsLineChartBasics() {
\t var margin = {top: 20, right: 10, bottom: 0, left: 50},
\t width = 500 - margin.left - margin.right,
\t height = 150 - margin.top - margin.bottom
\t ;
\t \t
\t \t return {
\t \t \t margin : margin,
\t \t \t width : width,
\t \t \t height : height
\t \t } \t \t \t
\t \t ;
}
function dsLineChart() {
\t var firstDatasetLineChart = datasetLineChartChosen(group);
\t
\t var basics = dsLineChartBasics();
\t
\t var margin = basics.margin,
\t \t width = basics.width,
\t height = basics.height
\t \t ;
\t var xScale = d3.scale.linear()
\t .domain([0, firstDatasetLineChart.length-1])
\t .range([0, width])
\t ;
\t var yScale = d3.scale.linear()
\t .domain([0, d3.max(firstDatasetLineChart, function(d) { return d.measure; })])
\t .range([height, 0])
\t ;
\t
\t var line = d3.svg.line()
\t //.x(function(d) { return xScale(d.category); })
\t .x(function(d, i) { return xScale(i); })
\t .y(function(d) { return yScale(d.measure); })
\t ;
\t
\t var svg = d3.select("#lineChart").append("svg")
\t .datum(firstDatasetLineChart)
\t .attr("width", width + margin.left + margin.right)
\t .attr("height", height + margin.top + margin.bottom)
\t // create group and move it so that margins are respected (space for axis and title)
\t
\t var plot = svg
\t .append("g")
\t .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
\t .attr("id", "lineChartPlot")
\t ;
\t \t /* descriptive titles as part of plot -- start */
\t var dsLength=firstDatasetLineChart.length;
\t plot.append("text")
\t \t .text(firstDatasetLineChart[dsLength-1].measure)
\t \t .attr("id","lineChartTitle2")
\t \t .attr("x",width/2)
\t \t .attr("y",height/2) \t
\t \t ;
\t /* descriptive titles -- end */
\t
\t plot.append("path")
\t .attr("class", "line")
\t .attr("d", line) \t
\t // add color
\t \t .attr("stroke", "lightgrey")
\t ;
\t
\t plot.selectAll(".dot")
\t .data(firstDatasetLineChart)
\t \t .enter().append("circle")
\t .attr("class", "dot")
\t //.attr("stroke", function (d) { return d.measure==datasetMeasureMin ? "red" : (d.measure==datasetMeasureMax ? "green" : "steelblue") })
\t .attr("fill", function (d) { return d.measure==d3.min(firstDatasetLineChart, function(d) { return d.measure; }) ? "red" : (d.measure==d3.max(firstDatasetLineChart, function(d) { return d.measure; }) ? "green" : "white") })
\t //.attr("stroke-width", function (d) { return d.measure==datasetMeasureMin || d.measure==datasetMeasureMax ? "3px" : "1.5px"})
\t .attr("cx", line.x())
\t .attr("cy", line.y())
\t .attr("r", 3.5)
\t .attr("stroke", "lightgrey")
\t .append("title")
\t .text(function(d) { return d.category + ": " + formatAsInteger(d.measure); })
\t ;
\t svg.append("text")
\t \t .text("Performance 2012")
\t \t .attr("id","lineChartTitle1") \t
\t \t .attr("x",margin.left + ((width + margin.right)/2))
\t \t .attr("y", 10)
\t \t ;
}
dsLineChart();
/* ** UPDATE CHART ** */
/* updates bar chart on request */
function updateLineChart(group, colorChosen) {
\t var currentDatasetLineChart = datasetLineChartChosen(group);
\t var basics = dsLineChartBasics();
\t
\t var margin = basics.margin,
\t \t width = basics.width,
\t height = basics.height
\t \t ;
\t var xScale = d3.scale.linear()
\t .domain([0, currentDatasetLineChart.length-1])
\t .range([0, width])
\t ;
\t var yScale = d3.scale.linear()
\t .domain([0, d3.max(currentDatasetLineChart, function(d) { return d.measure; })])
\t .range([height, 0])
\t ;
\t
\t var line = d3.svg.line()
.x(function(d, i) { return xScale(i); })
.y(function(d) { return yScale(d.measure); })
;
var plot = d3.select("#lineChartPlot")
\t .datum(currentDatasetLineChart)
\t ;
\t
\t /* descriptive titles as part of plot -- start */
\t var dsLength=currentDatasetLineChart.length;
\t
\t plot.select("text")
\t \t .text(currentDatasetLineChart[dsLength-1].measure)
\t \t ;
\t /* descriptive titles -- end */
\t
\t plot
\t .select("path")
\t \t .transition()
\t \t .duration(750) \t \t \t
\t .attr("class", "line")
\t .attr("d", line) \t
\t // add color
\t \t .attr("stroke", colorChosen)
\t ;
\t
\t var path = plot
\t \t .selectAll(".dot")
\t .data(currentDatasetLineChart)
\t .transition()
\t \t .duration(750)
\t .attr("class", "dot")
\t .attr("fill", function (d) { return d.measure==d3.min(currentDatasetLineChart, function(d) { return d.measure; }) ? "red" : (d.measure==d3.max(currentDatasetLineChart, function(d) { return d.measure; }) ? "green" : "white") })
\t .attr("cx", line.x())
\t .attr("cy", line.y())
\t .attr("r", 3.5)
\t // add color
\t \t .attr("stroke", colorChosen)
\t ;
\t
\t path
\t .selectAll("title")
\t .text(function(d) { return d.category + ": " + formatAsInteger(d.measure); }) \t
\t ;
}#pieChart {
\t position:absolute;
\t top:10px;
\t left:10px;
\t width:400px;
\t height: 400px;
}
#lineChart {
\t position:absolute;
\t top:10px;
\t left:410px;
\t height: 150px;
}
#barChart {
\t position:absolute;
\t top:160px;
\t left:410px;
\t height: 250px;
}
.slice {
font-size: 12pt;
font-family: Verdana;
fill: white; //svg specific - instead of color
font-weight: bold; \t
\t \t }
/*for line chart*/
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges; //The shape-rendering property is an SVG attribute, used here to make sure our axis and its tick mark lines are pixel-perfect.
}
.line {
fill: none;
/*stroke: steelblue;*/
stroke-width: 3px;
}
.dot {
/*fill: white;*/
/*stroke: steelblue;*/
stroke-width: 1.5px;
}
\t \t \t \t
.axis text {
font-family: Verdana;
font-size: 11px;
}
.title {
\t font-family: Verdana;
font-size: 15px; \t
\t \t
}
.xAxis {
font-family: verdana;
font-size: 11px;
fill: black;
}
.yAxis {
font-family: verdana;
font-size: 11px;
fill: white;
}
table {
\t border-collapse:collapse;
\t border: 0px; \t
\t font-family: Verdana; \t
\t color: #5C5558;
\t font-size: 12px;
\t text-align: right; \t \t \t
}
td {
\t padding-left: 10px; \t \t
}
#lineChartTitle1 {
\t font-family: Verdana;
\t font-size : 14px;
\t fill : lightgrey;
\t font-weight: bold;
\t text-anchor: middle;
}
#lineChartTitle2 {
\t font-family: Verdana;
\t font-size : 72px;
\t fill : grey;
\t text-anchor: middle;
\t font-weight: bold;
\t /*font-style: italic;*/
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="pieChart"></div>
<div id="barChart"></div>
<div id="lineChart"></div>
これが進むべき道です。私はAngularJS + D3を使用しています。私がここで達成しようとしていることの障害ですか？ – Shoplifter20
いいえ、そうではありません。実際には、すべてがすでに「接続」されているので、情報を更新/フィルタリングするための簡単な時間があるかもしれません。 – Rick
ええ、私はグラフごとにディレクティブを使用しています。情報バインディングは、各グラフが何を観察するかを正確に知っているので、はるかに簡単です。 – Shoplifter20