我接受了此Khan Academy section并将其转换为this： 我想做更多的事情 1）更改面包屑的样式 2）按照我喜欢的方式改变每个车轮的颜色 3）当人们点击方向盘的一部分时，我想在底部显示一个div，显示有关该特定部分的更多详细信息以及指向相应部分的KA网站的链接 任何有关如何执行此操作的指导将受到高度赞赏。感谢
这是JS：
'use strict';
var app = angular.module('app',['nvd3'] )
app.controller('ClusterWheelCtrl', ['$scope', function($scope){
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
$scope.breadcrumbs='';
$scope.data = {"name": ""};
$scope.elementObjects = {"name": ""};
$scope.options = {
chart: {
type: 'sunburstChart',
height: 450,
color: d3.scale.category20c(),
transitionDuration: 250,
sunburst: {
dispatch: {
chartClick: function(e) {
console.log($scope.data)
updateBreadcrumbs($scope.data.reverse(), '')
},
elementMouseover: function (e) {
function getElementNames(obj) {
var result = [obj];
if (obj.parent) {
result = result.concat(getElementNames(obj.parent));
}
return result;
}
var sequenceArray = getElementNames(e.data);
$scope.data = sequenceArray;
}
}
}
}
};
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = { w: 125, h: 30, s: 3, t: 10 };
initializeBreadcrumbTrail()
function initializeBreadcrumbTrail() {
// Add the svg area.
var trail = d3.select("#sequence").append("svg:svg")
.attr("width", 750)
.attr("height", 50)
.attr("id", "trail");
// Add the label at the end, for the percentage.
trail.append("svg:text")
.attr("id", "endlabel")
.style("fill", "#000");
}
// Generate a string that describes the points of a breadcrumb polygon.
function breadcrumbPoints(d, i) {
var points = [];
points.push("0,0");
points.push(b.w + ",0");
points.push(b.w + b.t + "," + (b.h / 2));
points.push(b.w + "," + b.h);
points.push("0," + b.h);
if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
points.push(b.t + "," + (b.h / 2));
}
return points.join(" ");
}
// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray, percentageString) {
// Data join; key function combines name and depth (= position in sequence).
var g = d3.select("#trail")
.selectAll("g")
.data(nodeArray, function(d) { return d.name + d.depth; });
// Add breadcrumb and label for entering nodes.
var entering = g.enter().append("svg:g");
entering.append("svg:polygon")
.attr("points", breadcrumbPoints)
.style("fill", function(d) { return 'deepskyblue'; });
entering.append("svg:text")
.attr("x", (b.w + b.t) / 2)
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; });
// Set position for entering and updating nodes.
g.attr("transform", function(d, i) {
return "translate(" + i * (b.w + b.s) + ", 0)";
});
// Remove exiting nodes.
g.exit().remove();
// Now move and update the percentage at the end.
d3.select("#trail").select("#endlabel")
.attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(percentageString);
// Make the breadcrumb trail visible, if it's hidden.
d3.select("#trail")
.style("visibility", "");
}
$scope.data = [{
"name": "Introduction to Trigonometry by Khan Academy",
"children": [
{
"name": "Trigonometry with right triangles",
"children": [
{
"name": "Introduction to the trigonometric ratios",
"children": [
{"name": "Opposite, adjacent, and hypotenuse (sides of right triangles)", "size": 15},
{"name": "Introduction to the trigonometric ratios", "size": 0},
{"name": "Finding trig ratios in right triangles", "size": 55},
{"name": "How to find trigonometric ratios in a right triangle (examples)"},
{"name": "Find trigonometric ratios in right triangles", "size": 15}
]
},
{
"name": "Solving for a side in a right triangle using the trigonometric ratios",
"children": [
{"name": "Finding an unknown side in a right triangle using trigonometry", "size": 3534},
{"name": "How to find missing sides in a right triangle using trigonometry (example)", "size": 5731},
{"name": "Solve for a side in a right triangle", "size": 7840}
]
},
{
"name": "Solving for an angle in a right triangle using the trigonometric ratios",
"children": [
{"name": "Inverse trig functions introduction", "size": 7074},
{"name": "Solve for an angle in a right triangle"}
]
},
{"name": "Modeling with Right Triangles",
"children": [
{"name": "How to solve a right triangle word problem with a missing angle (example)"},
{"name": "Angles of elevation and depression"},
{"name": "Right triangle word problems"}
]
},
{"name": "Trigonometric Ratios and Similarities",
"children": [
{"name": "Triangle similarity and the trigonometric ratios"},
{"name": "Challenge problem: Verify identities"},
{"name": "Challenge problem: Match trigonometric values and side ratios"}
]
},
{"name": "Sine and Cosine of Complementary Angles",
"children": [
{"name": "The sine and cosine of complementary example"},
{"name": "Using the relationship between sine and cosine of complementary angles to solve a geometry problem"},
{"name": "Using the relationship between sine and cosine of complementary angles to solve a real-world problem"}
]
},
{"name": "Trigonometric Ratios of Special Triangles",
"children": [
{"name": "Trig ratios of special triangles"}
]
},
{"name": "Introduction to the Pythagorean Trigonometric Identity",
"children": [
{"name": "Introduction to the Pythagorean trigonometric identity"}
]
},
{"name": "The reciprocal Trig Ratios",
"children": [
{"name": "Reciprocal trig ratios (cosecant, secant, and cotangent)"},
{"name": "How to find the reciprocal trigonometric ratios of an angle (example)"},
{"name": "How to use cotangent in order to solve for a side in a right triangle (example)"},
{"name": "Sine, cosine, and cofunctions"}
]
}
]
},
{
"name": "Trigonometry with General Triangles",
"children": [
{"name": "The Law of Sines", "size": 17010,
"children": [
{"name": "How to find a missing side length using the law of sines (example)"},
{"name": "How to find a missing angle measure using the law of sines (example)"},
{"name": "Solve triangles using the law of sines"},
{"name": "Proof of the law of sines"}
]
},
{"name": "The Law of Cosines", "size": 5842,
"children": [
{"name": "How to find a missing side length using the law of cosines (example)"},
{"name": "How to find a missing angle measure using the law of cosines (example)"},
{"name": "Solve triangles using the law of cosines"},
{"name": "Proof of the law of cosines"}
]
},
{
"name": "Solving General Triangles",
"children": [
{"name": "Word problem: Solving for a side length in a general triangle (example)", "size": 1983},
{"name": "General triangle word problems", "size": 2047}
]
}
]
},
{
"name": "The unit circle definition of sine, cosine, and tangent",
"children": [
{
"name": "Introduction to Radians",
"children": [
{"name": "Introduction to radians", "size": 721},
{"name": "Converting between radians and degrees", "size": 4294},
{"name": "How to convert from degrees to radians (example)", "size": 9800},
{"name": "How to convert from radians to degrees (example)", "size": 1314},
{"name": "Convert between degrees and radians", "size": 2220},
{"name": "Rotation by radians and quadrants"}
]
},
{"name": "The Unit Circle Definition of Sine, Cosine and Tangent", "size": 1759,
"children": [
{"name": "The unit circle definition of sine, cosine, and tangent"},
{"name": "How to find trigonometric values using the unit circle definition (example)"},
{"name": "Find trig values using the unit circle definition"},
{"name": "Matching the SOH CAH TOA and the unit circle definitions of the trigonometric functions"}
]
},
{"name": "The graphs of Sine, Cosine and Tangent", "size": 2165,
"children": [
{"name": "The graph of the sine function"},
{"name": "The graph of the tangent function"},
{"name": "Finding the intersection points of the graphs of sine and cosine"}
]
},
{"name": "Basic Trigonometric Identities", "size": 586,
"children": [
{"name": "Sine and cosine identities that arise from the symmetry of the unit circle"},
{"name": "Tangent identities that arise from the symmetry of the unit circle"},
{"name": "Sine and cosine identities that arise from angle rotations on the unit circle"},
{"name": "Identity that arises from the periodicity of the tangent function"}
]
},
{"name": "Trigonometric Values of Special Angles", "size": 3331,
"children": [
{"name": "Finding the trigonometric values of a special angle in the unit circle"},
{"name": "Find the trigonometric values of special angles"}
]
},
{"name": "The Pythagorean Identity", "size": 772,
"children": [
{"name": "Proof of the Pythagorean trigonometric identity"},
{"name": "How to find a trig value of an angle given another trig value of the angle (example)"},
{"name": "Use the Pythagorean identity"}
]
},
{"name": "Love live Tau", "size": 3322,
"children": [
{"name": "Tau versus Pi"},
{"name": "Pi is (still) wrong"}
]
}
]
},
{
"name": "Graphs of trigonometric functions",
"children": [
{"name": "The graphs of sine, cosine, and tangent", "size": 8833,
"children": [
{"name": "The graph of the sine function"},
{"name": "The graph of the tangent function"},
{"name": "Finding the intersection points of the graphs of sine and cosine"}
]
},
{"name": "Introduction to amplitude, midline, and extrema of sinusoidal functions", "size": 1732,
"children": [
{"name": "Midline, amplitude and period of a sinusoidal function"},
{"name": "Find the midline of sinusoidal functions from their graph"},
{"name": "Find the amplitude of sinusoidal functions from their graph"}
]
},
{"name": "Finding amplitude and midline of sinusoidal functions from their formulas", "size": 3623,
"children": [
{"name": "Find the midline of a sinusoidal function from its formula"},
{"name": "How to find the amplitude and period of a sinusoidal functions from its formula (example)"},
{"name": "Find the amplitude of a sinusoidal function from its formula"}
]
},
{"name": "Period of sinusoidal functions", "size": 10066,
"children": [
{"name": "Find the period of sinusoidal functions from their graph"},
{"name": "How to find the amplitude and period of a sinusoidal functions from its formula (example)"},
{"name": "Find the period of a sinusoidal function from its formula"}
]
},
{"name": "Graphing sinusoidal functions", "size": 10066,
"children": [
{"name": "Graph of a sinusoidal function with vertical stretch and horizontal reflection"},
{"name": "Graph of a sinusoidal function with vertical and horizontal stretches"},
{"name": "Graph sinusoidal functions"},
{"name": "Graph sinusoidal functions (including phase shift)"}
]
},
{"name": "Constructing sinusoidal functions", "size": 10066,
"children": [
{"name": "How to construct a sinusoidal function from its graph"},
{"name": "Construct sinusoidal functions"},
{"name": "Word problem: Constructing a sinusoidal model using sine"},
{"name": "Word problem: Constructing a sinusoidal model using cosine"},
{"name": "Model situations with sinusoidal functions"},
{"name": "Word problem: Constructing a sinusoidal model with phase shift"},
{"name": "Model situations with sinusoidal functions (including phase shift)"}
]
}
]
},
{
"name": "Trigonometric equations and identities",
"children": [
{"name": "The inverse trigonometric functions", "size": 4116,
"children": [
{"name": "Introduction to arcsine"},
{"name": "Introduction to arctangent"},
{"name": "Introduction to arccosine"},
{"name": "Evaluate inverse trigonometric functions"},
{"name": "How to restrict the domain of a function to make it invertible (example)"},
{"name": "Restricting the domain of a tangent function to make it invertible"},
{"name": "How to find an angle given its tangent using a calculator (example)"}
]
},
{"name": "Solving basic sinusoidal equations", "size": 4116,
"children": [
{"name": "How to find all solutions to an equation of the form sin(x)=d (example)"},
{"name": "Solving cos(θ)=1 and cos(θ)=-1"},
{"name": "Solve basic sinusoidal equations"}
]
},
{"name": "Solving advanced sinusoidal equations", "size": 4116,
"children": [
{"name": "Solve advanced sinusoidal equations"}
]
},
{"name": "Solving sinusoidal models", "size": 4116,
"children": [
{"name": "Word problem: Solving a sinusoidal modeling function"},
{"name": "Solve sinusodial modeling functions"}
]
},
{"name": "Introduction to the trigonometric angle addition identities", "size": 4116,
"children": [
{"name": "Review of the trigonometric angle addition identities"},
{"name": "How to use the cosine angle addition identity (example)"},
{"name": "How to use the cosine double-angle identity (example)"},
{"name": "Practice using the trigonometric angle addition identities"},
{"name": "Proof of the sine angle addition identity"},
{"name": "Proof of the cosine angle addition identity"}
]
},
{"name": "Using trigonometric identities to solve problems", "size": 4116,
"children": [
{"name": "How to find trigonometric values using the angle addition formulas (example)"},
{"name": "Use angle addition formulas to find trig values"},
{"name": "How to find a side length using the trig angle addition identities (example)"},
{"name": "How to manipulate expressions using the trig angle addition formulas (example)"},
{"name": "Rewriting trigonometric expressions using trigonometric identities"}
]
},
{"name": "Challenging trigonometry problems",
"children": [
{"name": "Challenge problem: Find the area of a triangle"},
{"name": "Challenge problem: Find the area of a hexagon"},
{"name": "Challenge problem: Find cosine of sum of angles given their cosines"},
{"name": "Challenge problem: Rewrite a trigonometric equation of angles in arithmetic progression"},
{"name": "Challenge problem: Find the maximum value of a trigonometric expression"},
{"name": "Challenge problem: System of trigonometric equations"},
{"name": "Challenge problem: Conditions on angle for a system of equation having a solution"}
]
}
]
},
{
"name": "Miscellaneous",
"children": [
{"name": "Trigonometry readiness warmup", "size": 1082,
"children": [
{"name": "Trigonometry Warmup"}
]
}
]
},
{
"name": "Old Content",
"children": [
{"name": "Trigonometry 0.5", "size": 1616},
{"name": "Trigonometry 1.5", "size": 1027},
{"name": "Reciprocal Trig Functions", "size": 3891},
{"name": "Trigonometric functions and side ratios in right triangles", "size": 891},
{"name": "Non-right Triangle Proofs", "size": 2893},
{"name": "Radians on the unit circle", "size": 5103},
{"name": "Radians and arc length", "size": 3677},
{"name": "Unit circle trigonometry", "size": 781},
{"name": "Symmetry and periodicity of trigonometric functions", "size": 4141},
{"name": "Understanding inverse trig functions", "size": 933},
{"name": "Understanding angle addition formulas", "size": 5130},
{"name": "Manipulating trig expressions with pythagorean identities", "size": 3617} ]
}
]
}];
}]);
答案 0 :(得分：0)
1）要更改面包屑的某些样式或属性，请编辑以下行：
SecurityContextHolderAwareRequestFilter您可以使用 entering.append("svg:polygon")
.attr("points", breadcrumbPoints)
.style("fill", function(d) { return 'red'; });
元素包装面包屑的文本元素，以便在面包屑上建立链接：
<svg:a>2）要更改颜色设置，请执行以下操作：
.append("svg:a")
// wrap text node in 'a' node
.attr("text-anchor", "middle")
.attr("xlink:href", function(d){return d.url;}) // put here the right 'url' field (here url is defined for a few items)
.append("svg:text")
.attr("x", (b.w + b.t) / 2)
.attr("x", (b.w + b.t) / 2)
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; });
有关https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20
的更多详情最后检查分叉和修改的CodePen：