我用d3.js制作了一个折线图(见附图1).
当鼠标悬停时,我设法在图形点上插入工具提示.我也想改变点的颜色和大小.我试过很多方面,但看起来真的很难.有帮助吗?这是一段代码:
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5.5)
.style("fill", "#fff8ee")
.style("opacity", .8) // set the element opacity
.style("stroke", "#f93") // set the line colour
.style("stroke-width", 3.5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.close); })
.on("mouseover", function(d) {
div.transition()
.duration(70)
.style("opacity", .7)
;
div .html(formatTime(d.date) + "<br/>" + d.close)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(200)
.style("opacity", 0);
});
Run Code Online (Sandbox Code Playgroud) 我正在使用mapbox.js处理地图,但我想设置一个限制来映射边界和缩放.我要在这个脚本中添加什么代码?
var map = L.mapbox.map('map', 'examples.map-9ijuk24y').setView([40, -74.50], 9);
Run Code Online (Sandbox Code Playgroud) 我有一个 tsv,其中有一个季度格式的日期字段(名为“trim”)
trim
1992-4
1993-1
...
Run Code Online (Sandbox Code Playgroud)
当我将文件作为数据框加载时,R 将该字段作为字符导入。
我无法转换它,我只得到 NA,即使我尝试:
df$trim <- as.Date(df$trim, format="%Y-%q")
Run Code Online (Sandbox Code Playgroud)
或加载动物园包并发送此命令:
as.yearqtr(df$trim, format="%Y-%q")
Run Code Online (Sandbox Code Playgroud)
任何的想法?
我需要使用bootstrap在HTML div上放置一个d3图表,但我不能.我设法把它贴在身上,但我不知道为什么我不能在div里面.我在脚本中使用这样的代码:
var chart1 = d3.select("#chart1")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
Run Code Online (Sandbox Code Playgroud)
和一个简单的方法:
<div id="chartline1"></div>
Run Code Online (Sandbox Code Playgroud)
这是所有代码:
<!DOCTYPE html>
<html>
<head>
<title>Linee1</title>
</head>
<meta charset="utf-8">
<body>
<script type="text/javascript" src="d3/d3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script>
var margin = {top: 130, right: 40, bottom: 45, left: 150},
width = 1000 - margin.left - margin.right,
height = 505 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");
var x …
Run Code Online (Sandbox Code Playgroud)