使用D3制作图表_技术问答

慕雪5430657

x y轴分别有数据要输入比如x=[1,3,4,5,6,8] y轴=[3,6,12,5,15,12] 这种怎么实现: 用一个计算去处理，; 2022-06-27 1回答·335浏览

lunaliu

d3 知识图谱: 是的，要去设置的; 2021-11-30 1回答·404浏览

刘一驰

视频问题 2-2看不了: 我也看不了; 2021-01-19 1回答·488浏览

qq_痛恍若隔世的幸福_0

文字被隐藏的第二种显示的解决方法: 是边距的问题; 2020-05-19 1回答·885浏览

qq_痛恍若隔世的幸福_0

面积图渐变色填充

// 线性渐变 需要手动添加  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;
}

2020-05-19 1回答·882浏览

150155

请问有课程代码吗？

这是我写的第一个曲线的代码，你自己改一下吧

这是index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</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")

2020-01-04 1回答·975浏览

阿常先森

为g元素添加属性无效: 添加的那个属性无效你要说清楚啊？; 2019-07-17 1回答·1289浏览

奇点先生

有这个源码地址吗？: 没有源代码; 2019-06-21 1回答·908浏览

不做人了

代码和老师的一样，但是出来的曲线图象偏左是咋回事鸭？: translate(50,30); 2019-05-18 1回答·1153浏览

fooooooof

求源码地址: 2019-04-23 0回答·894浏览

YAaron

dc.js: 是d3.js; 2019-04-20 1回答·1161浏览

qq_要名字干什么_fpEY05

没有svg出来: 你div的class类名明明是contaiiner,所以js里面应该写成d3.select('#contaiiner'); 2018-10-23 2回答·1519浏览

拉拉德玛西亚

希望老师有新的课程: 2018-10-12 0回答·1195浏览

慕仙8036517

关于d3.js如何接收json格式的数据: 直接用路径的方法去获取就可以了; 2018-08-31 1回答·3199浏览

慕粉3727899

d3.csv()

d3.csv("js/数据.csv", type, function(data) {

console.log(data);

}取到一组以.csv结尾的数据

2018-08-11 1回答·1743浏览

慕粉3727899

type(d): 因为这个函数作为CSV（url，type,function(data){}）的参数传到了csv的函数里面，csv函数的具体逻辑可以去查下d3的文件，可以理解成数据是在csv中走的，只是在csv中执行了下type（d）; 2018-08-09 1回答·1174浏览

慕粉3727899

.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

2018-08-08 2回答·1438浏览

慕粉3727899

.domain是什么啊，怎么定义它呢？: 表示的一个数据范围的输入; 2018-08-08 1回答·1884浏览

慕粉3727899

svg命名空间: 直接写.append("svg")就好了; 2018-08-08 1回答·1732浏览

慕九州8124222

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;

});

2018-07-22 1回答·5403浏览

qq_A_221

g元素偏移: 描述的更清楚一些？; 2018-04-27 1回答·1255浏览

慕用6167496

TypeError: d3.svg is undefined: 已采纳尤水就下3783409 的回答; 版本不一样，你直接写d3.line()即可，不用svg; 2018-03-31 1回答·2063浏览

qq_聋子听哑巴说瞎子看见鬼了_0

html中应该怎么写啊..

<!DOCTYPE html>

<html>

<head>

<title>barchart_horizontal</title>

</head>

<body>

</body>

</html>

我是自己网上下了一个d3.min.js文件，放在了js文件夹下

2017-11-17 1回答·1395浏览

刻命

请问怎么才能实现与取曲线进行交互？？

已采纳慕粉2023498883 的回答

我只能说一下概念，能力有限，不好意思。

在对应的标签中用hover样式，里面调用函数显示内容，内容里面传入对应内容节点数组的x,y参数，然后对应的调用另一个显示内容的函数，用来显示内容。

2017-09-18 1回答·1379浏览

qq_麦子_13

生成垂直柱状图这一章节，我的报错了，scale_x(d.year)未起作用: 哦。。我看到下面发现scale_x里domain输出是d.year; 2017-09-13 2回答·2657浏览

天上下代码

下标问题啊: 数据源长度不够; 2017-08-31 1回答·1249浏览

qq_乐乐_33

求示例代码

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;
}

2017-07-14 1回答·1359浏览

moon_2007

老师用的编译工具是什么: sublime text; 2017-07-13 1回答·1108浏览

qq_尼麻麻_0

为什么我的path属性没用

贴代码 (^·_·^),多重复看视频,还有控制台信息

QAQ ~~~ (注: 老师的是 v3版本, 可能你用的是 v4)

2017-05-22 1回答·1205浏览

jiakubala

line报错， Uncaught TypeError: Cannot read property 'line' of undefined ，这个是什么原因呢: 2017-05-14 3回答·1525浏览