我试图通过jQuery更改我的属性为默认，但我找不到任何jQuery API。
var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json"
d3.json(url, function(json) {
//load data from API and save in variable data
var data = json.monthlyVariance;
var baseTemp = json.baseTemperature;
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
//Add temperature to each object in data set
for (var i = 0; i < data.length; i++) {
var temperature = baseTemp + data[i].variance
data[i].temperature = temperature;
var monthString = "";
switch (data[i].month) {
case 1:
data[i].monthString = "January";
break;
case 2:
data[i].monthString = "February";
break;
case 3:
data[i].monthString = "March";
break;
case 4:
data[i].monthString = "April";
break;
case 5:
data[i].monthString = "May";
break;
case 6:
data[i].monthString = "June";
break;
case 7:
data[i].monthString = "July";
break;
case 8:
data[i].monthString = "August";
break;
case 9:
data[i].monthString = "September";
break;
case 10:
data[i].monthString = "October";
break;
case 11:
data[i].monthString = "November";
break;
case 12:
data[i].monthString = "December";
break;
}
}
//Set dimensions of div container, svg, and chart area(g element)
var margin = {
top: 40,
right: 60,
bottom: 100,
left: 100
};
//Width of the chart, within SVG element
var w = 1000 - margin.left - margin.right;
//Height of the chart, within SVG element
var h = 600 - margin.top - margin.bottom;
//Create SVG element and append to #chart div container
//SVG is nested G element
var svg = d3.select("#chart")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Get Min Max values
var maxYear = d3.max(data, function(d) {
return d.year;
});
var minYear = d3.min(data, function(d) {
return d.year;
});
var maxTemp = d3.max(data, function(d) {
return d.temperature;
});
var minTemp = d3.min(data, function(d) {
return d.temperature;
})
//Create X scale, axis and label
var xScale = d3.scaleLinear()
.domain([minYear, maxYear])
.range([0, w]);
var xAxis = d3.axisBottom()
.scale(xScale)
.ticks(20)
.tickFormat(d3.format("d"));
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
var xLabel = svg.append("text")
.text("Year")
.attr("x", w / 2)
.attr("y", h + (margin.bottom / 2.5))
.attr("font-size", "14px");
//Create Y scale, axis and label
var cellHeight = (h / 12);
var yRange = [];
for (var i = 0; i < 12; i++) {
yRange.push(i * cellHeight);
}
var yScale = d3.scaleOrdinal()
.domain(months)
.range(yRange);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(12);
svg.append("g")
//append a g element
.attr("class", "axis")
.call(yAxis)
//call yAxis function on this g element
.selectAll(".tick text")
//select all elements with class tick and nested text element
.attr("transform", "translate(0," + (cellHeight / 2) + ")");
//move all text elements half a cell height down
var yLabel = svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - (h / 2))
.attr("y", 0 - (margin.left / 1.8))
.style("font-size", "14px")
.style("text-anchor", "middle")
.text("Month");
//Create color scale
var colorCodes = ["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598", "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"];
var colors = d3.scaleQuantile()
//quantize scale divides domain in bands according to ordinal scale range
.domain([minTemp, maxTemp])
//.domain(d3.ticks(minTemp,maxTemp,11))
.range(colorCodes);
var colorQuantiles = colors.quantiles();
colorQuantiles.unshift(0);
//save the upper ranges of each temperature quantile + 0 at the beginning (quantile function does not count 0 as start)
//Append tooltip to chart area. Fully transparant at first
var tip = d3.select("#chart").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//Select all rect elements in G container element, bind data and append
var cells = svg.selectAll("cells")
.data(data)
.enter()
.append("rect");
var cellAttributes = cells
.attr("x", function(d) {
return xScale(d.year);
})
.attr("y", function(d) {
return yScale(d.monthString);
})
.attr("width", w / (maxYear - minYear))
.attr("height", cellHeight)
.attr("fill", function(d) {
return colors(d.temperature);
})
.attr("class", "cell")
.on("mouseover", function(d) {
tip.transition()
.style("opacity", 0.7);
tip.html("<strong>" + months[d.month - 1] + " - " + d.year + "</strong><br>" + d.temperature.toFixed(2) + " °C<br>" + d.variance.toFixed(2) + " °C")
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 70 + "px");
})
.on("mouseout", function(d) {
tip.transition()
.style("opacity", 0);
})
//Create a legend
var blockWidth = 35;
var blockHeight = 20;
var legend = svg.selectAll(".legend")
.data(colorQuantiles)
.enter()
.append("g")
.attr("class", "legend")
.attr("font-size", "14px")
.attr("font-style", "PT Sans")
.attr("transform", function(d, i) {
return ("translate(" + i * blockWidth + ",0)")
});
legend.append("rect")
.attr("x", (w / 5) * 3)
.attr("y", h + (margin.bottom / 3))
.attr("width", blockWidth)
.attr("height", blockHeight)
.style("fill", function(d, i) {
return (colorCodes[i]);
});
legend.append("text")
.attr("x", ((w / 5) * 3) + (blockWidth / 2))
.attr("y", (h + (margin.bottom / 3)) + blockHeight + 15)
.text(function(d, i) {
return colorQuantiles[i].toFixed(1);
})
.style("text-anchor", "middle");
})
这是我的codepen
修改
现在我找到了 jQuery("#video")
.attr("src","http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
jQuery(".video").get(0).play();
jQuery(".fullscreen").click(function(){
jQuery(this).removeClass("is-video-active");
jQuery(".video").get(0).pause();
//reset the attribute to default
jQuery("#video").attr('src','');
，但它从年龄开始删除了第一个视频，留下了一个白色的空白区域。
答案 0 :(得分：0)
您可以使用以下方式初始化src属性：
jQuery("#video").attr('src','');
//Or
jQuery("#video").prop('src','');
希望这有帮助。