-
慕雪5430657
2022-06-27
- x y轴分别有数据要输入 比如x=[1,3,4,5,6,8] y轴=[3,6,12,5,15,12] 这种怎么实现
用一个计算去处理，
- 1回答·269浏览
-
lunaliu
2021-11-30
- d3 知识图谱
是的，要去设置的
- 1回答·284浏览
-
刘一驰
2021-01-19
- 视频问题 2-2看不了
我也看不了
- 1回答·428浏览
-
qq_痛恍若隔世的幸福_0
2020-05-19
- 文字被隐藏的第二种显示的解决方法
是边距的问题
- 1回答·803浏览
-
qq_痛恍若隔世的幸福_0
2020-05-19
- 面积图渐变色填充
// 线性渐变 需要手动添加 linearGradient 标签 // 径向渐变同理 function linearGradient(container, color1, color2) { var defs = container.append("defs"); var gradient = defs .append("linearGradient") .attr("id", "linearColor") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); gradient .append("stop") .attr("offset", "0%") .style("stop-color", color1.toString()); gradient .append("stop") .attr("offset", "100%") .style("stop-color", color2.toString()); return gradient; }- 1回答·811浏览
-
150155
2020-01-04
- 请问有课程代码吗？
这是我写的第一个曲线的代码，你自己改一下吧
这是index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css"/>
</head>
<body>
<div id = "container"></div>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<script type = "text/javascript"src="js/index.js"></script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
这是style.css
#container{
background: #ddd;
width:500px;
height:250px;
}
path{
fill:none;
stroke:#4682B4;
stroke-width:2;
}
.domain,tick line{
stroke:grey;
stroke-width:1;
}
------------------------------------------------------------------------------------------------------------------
这是index.js
var width = 500,
height = 250,
margin = {left:50,top:30,right:20,bottom:20},
g_width = width-margin.left-margin.right,
g_height = height-margin.top-margin.bottom;
//svg
var svg = d3.select("#container")
.append("svg")
//width.height
.attr("width",width)
.attr("height",height)
var g = d3.select("svg")
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")")
var data = [1,3,5,7,8,4,3,7]
var scale_x = d3.scale.linear()
.domain([0,data.length-1])//输入范围
.range([0,g_width])//输出范围
var scale_y = d3.scale.linear()
.domain([0,d3.max(data)])
.range([g_height,0])
var line_generator = d3.svg.line()
.x(function(d,i){return scale_x(i);})
.y(function(d){return scale_y(d);})
.interpolate("cardinal")
d3.select("g")
.append("path")
.attr("d",line_generator(data))
var x_axis = d3.svg.axis().scale(scale_x),
y_axis = d3.svg.axis().scale(scale_y).orient("left");
g.append("g")
.call(x_axis)
.attr("transform","translate(0,"+g_height+")")
g.append("g")
.call(y_axis)
.append("text")
.text("Price($)")
.attr("transform","rotate(-90)")
.attr("text-anchor","end")
.attr("dy","1em")
- 1回答·900浏览
-
阿常先森
2019-07-17
- 为g元素添加属性无效
添加的那个属性无效你要说清楚啊 ？
- 1回答·1159浏览
-
奇点先生
2019-06-21
- 有这个源码地址吗？
没有源代码
- 1回答·844浏览
-
不做人了
2019-05-18
- 代码和老师的一样，但是出来的曲线图象偏左是咋回事鸭？
translate(50,30)
- 1回答·1054浏览
-
fooooooof
2019-04-23
- 求源码地址
- 0回答·830浏览
-
YAaron
2019-04-20
- dc.js
是d3.js
- 1回答·1096浏览
-
qq_要名字干什么_fpEY05
2018-10-23
- 没有svg出来
你div的class类名明明是contaiiner,所以js里面应该写成d3.select('#contaiiner')
- 2回答·1429浏览
-
拉拉德玛西亚
2018-10-12
- 希望老师有新的课程
- 0回答·1102浏览
-
慕仙8036517
2018-08-31
- 关于d3.js如何接收json格式的数据
直接用路径的方法去获取就可以了
- 1回答·3122浏览
-
慕粉3727899
2018-08-11
- d3.csv()
d3.csv("js/数据.csv", type, function(data) {
console.log(data);
}取到一组以.csv结尾的数据
- 1回答·1643浏览
-
慕粉3727899
2018-08-09
- type(d)
因为这个函数作为CSV（url，type,function(data){}）的参数传到了csv的函数里面，csv函数的具体逻辑可以去查下d3的文件，可以理解成数据是在csv中走的，只是在csv中执行了下type（d）
- 1回答·1122浏览
-
慕粉3727899
2018-08-08
- .interpolate报错
是因为你使用的 d3js 版本比视频中老师用的新，接口不一样。
参考 这里：
https://d3js.org.cn/document/d3-shape/#curves
使用指定的 alpha 值(
[0, 1]) 返回一条Catmull–Rom生成器。如果 alpha 为0则等价于 curveCardinal，如果 alpha 为1则会生成chordal曲线，如果 alpha 为0.5则会生成 centripetal spline老师 使用的接口
d3.line().x().y().interpolate('cardinal')
等价于新的接口用法
d3.line().x().y().curve(CatmullRom.alpha(0.5))
里面的 0.5 设置为 0
- 2回答·1363浏览
-
慕粉3727899
2018-08-08
- .domain是什么啊，怎么定义它呢？
表示的一个数据范围的输入
- 1回答·1769浏览
-
慕粉3727899
2018-08-08
- svg命名空间
直接写.append("svg")就好了
- 1回答·1656浏览
-
慕九州8124222
2018-07-22
- data is not defined
兄弟 这样才对
d3.csv("data.csv", type, function(data){ console.log(data); function type(d){ d.population = +d.population; return d; } var bar_width = 50, bar_padding = 10, svg_width = (bar_width + bar_padding) * data.length, svg_height=500; });- 1回答·5278浏览
-
qq_A_221
2018-04-27
- g元素偏移
- 描述的更清楚一些？
- 1回答·1182浏览
-
慕用6167496
2018-03-31
- TypeError: d3.svg is undefined
- 已采纳 尤水就下3783409 的回答
版本不一样，你直接写d3.line()即可，不用svg
- 1回答·1932浏览
-
qq_聋子听哑巴说瞎子看见鬼了_0
2017-11-17
- html中应该怎么写啊..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>barchart_horizontal</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="js/d3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
我是自己网上下了一个d3.min.js文件，放在了js文件夹下
- 1回答·1307浏览
-
刻命
2017-09-18
- 请问怎么才能实现与取曲线进行交互？？
- 已采纳 慕粉2023498883 的回答
我只能说一下概念，能力有限，不好意思。
在对应的标签中用hover样式，里面调用函数显示内容，内容里面传入对应内容节点数组的x,y参数，然后对应的调用另一个显示内容的函数，用来显示内容。
- 1回答·1294浏览
-
qq_麦子_13
2017-09-13
- 生成垂直柱状图这一章节，我的报错了，scale_x(d.year)未起作用
哦。。我看到下面发现scale_x里domain输出是d.year
- 2回答·2593浏览
-
天上下代码
2017-08-31
- 下标问题啊
数据源长度不够
- 1回答·1174浏览
-
qq_乐乐_33
2017-07-14
- 求示例代码
var width = 500, height = 250, margin = {left: 50, top: 30, right: 20, bottom: 20}, g_width = width - margin.left - margin.right, g_height = height - margin.top - margin.bottom; // 类似jq的链式调用 // 制作图中的线条 var svg = d3.select('#container') .append("svg:svg") // width,height .attr('width', width)//attribute .attr('height', height); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var data = [1, 3, 5, 7, 8, 4, 3, 7]; // 放大 var scale_x = d3.scaleLinear() .domain([0, data.length - 1]) .range([0, g_width]); var scale_y = d3.scaleLinear() .domain([0, d3.max(data)]) .range([g_height, 0]);// 切换坐标轴的朝向 var line_generator = d3.line() .x(function (d, i) { // d代表数据 // i代表下标 return scale_x(i); }) .y(function (d) { return scale_y(d); }) .curve(d3.curveCatmullRom.alpha(0.5)); g.append('path').attr('d', line_generator(data)); // 制作坐标轴 var x_axis = d3.axisBottom(scale_x), y_axis = d3.axisLeft(scale_y); g.append("g").call(x_axis) .attr("transform", "translate(0," + g_height + ")"); g.append("g").call(y_axis) .append("text").text("Price($)") // 设置单位等 .attr("transform", "rotate(-90)") // 定位 .attr("text-anchor", "end") .attr("dy", "1em");#container { background: #ddd; width: 500px; height: 250px; } path { fill: none; stroke: #4682B4; stroke-width: 2; } text { fill: #000; } .domain, .tick line { stroke: gray; }- 1回答·1263浏览
-
moon_2007
2017-07-13
- 老师用的编译工具是什么
sublime text
- 1回答·1053浏览
-
qq_尼麻麻_0
2017-05-22
- 为什么我的path属性没用
贴代码 (^·_·^),多重复看视频,还有控制台信息
QAQ ~~~ (注: 老师的是 v3版本, 可能你用的是 v4)
- 1回答·1127浏览
-
jiakubala
2017-05-14
