小编pax*_*man的帖子

如何将d3.svg.axis限制为整数标签?

是否有可能限制图表上显示的d3.svg.axis整数标签的数量?以此图表为例.这里只有5种尺寸:[0, 1, 2, 3, 4].但是,也会显示.5, 1.5, 2.5和的刻度3.5.

在此输入图像描述

javascript axis labels axis-labels d3.js

38
推荐指数
3
解决办法
2万
查看次数

svg/d3.js在矩形的一角上的圆角

我知道svg有一个内置功能来做圆角,但我需要在四个角中的两个角上做圆角.

我知道我可以在彼此之上绘制多个矩形来模仿它,但这看起来有点俗气.有什么方法可以使用剪辑或任何d3.js方法吗?

现在我有一个水平条形图,其形状如下:

    rects.enter().append("rect")
        .attr("x",function(d,i) { return x(0); })
        .attr("width",function(d) { return x(d.value) - x(0); })
        .attr("height",y.rangeBand())
        .attr("y",function(d) { return y(d.name); })
Run Code Online (Sandbox Code Playgroud)

我试图在rect的右侧产生圆角,但不知道该怎么做.

javascript svg rounding d3.js

30
推荐指数
4
解决办法
2万
查看次数

如何在d3.js中返回路径的y坐标?

我有一个图表,我希望代表图形的线在svg区域顶部悬停时在x坐标处显示一个圆圈.该圆应遵循表示曲线的线的路径.问题是我不知道该怎么做.

下面的代码显示了我已经取得了多少成功,它确实在右边x坐标处为文档添加了一个圆圈.现在,我该用什么替换问号?

    svg.on("mousemove", function() {
        d3.select("path.line")
          .style("stroke-width", "2.5px");

         svg.append("svg:circle")
            .attr("cx", Math.floor(event.offsetX-m[1]))
            .attr("cy", ?)
            .attr("r", "10")
            .attr("fill", "red");
    });
Run Code Online (Sandbox Code Playgroud)

javascript svg d3.js

24
推荐指数
1
解决办法
2万
查看次数

D3.js中selection.style和selection.attr之间的区别是什么?

我发现它们都适用于我的测试:

    .on("mouseover",
        function() {
            d3.select(this)
                .select("text")
                .style("fill","red");
        })
Run Code Online (Sandbox Code Playgroud)

要么

    .on("mouseover",
        function() {
            d3.select(this)
                .select("text")
                .attr("fill","red");
        })
Run Code Online (Sandbox Code Playgroud)

javascript events function d3.js

18
推荐指数
1
解决办法
6792
查看次数

在线图上的D3中隐藏刻度线标签

我是D3的新手,只是在用D3制作的线图上有一个关于刻度标签的快速问题.我正在使用d3.svg.axis.scale().tickSize().tickSubdivide()生成我的刻度线.

有没有办法隐藏它们或改变它们的价值?例如,我有一个折线图,其中刻度标签是间隔(1,2,3等),我想将它们更改为字符串,如('Jan','Feb','Mar','Apr '等等).那可能吗?

谢谢!

javascript d3.js

17
推荐指数
2
解决办法
1万
查看次数

以百分比显示y轴?

我正在创建一个图表,我希望我的y轴刻度标签显示为百分比(而不是小数).我怎样才能做到这一点?

我当前的代码看起来像

yAxis
  .append("text")
  .attr("class", "ticklabel")
  .attr("x", 0)
  .attr("y", y)
  .attr("dy", ".5em")
  .attr("text-anchor", "middle")
  .text(y.tickFormat(5))
  .attr("font-size", "10px")
Run Code Online (Sandbox Code Playgroud)

我注意到d3有一个格式说明符,但我不确定如何结合使用它们tickFormat.

javascript format svg d3.js

13
推荐指数
1
解决办法
2万
查看次数

D3.js动画旋转

当我尝试使用D3.js库正确执行旋转动画时,我遇到了麻烦.问题与我想要旋转元素的点有关.

这是我用来表示我的意思(慢动作)的小提琴:http://jsfiddle.net/74mCb/

似乎问题的根源在于:

.attr("transform", "rotate(-60, 150,130)");
Run Code Online (Sandbox Code Playgroud)

然后我像这样旋转它:

.attr("transform", "rotate(40 150,130)");
Run Code Online (Sandbox Code Playgroud)

我希望针的屁股保持在适当的位置(成为旋转的中心),有人可以解释一下我做错了什么吗?

谢谢!

javascript animation transform rotation d3.js

13
推荐指数
2
解决办法
2万
查看次数

如何使用d3.js为圆环图中的数据创建标签

我有一个圆环图,可以更新点击数据.我想为同一数据添加标签.我目前正在使用d3.js javascript库. 这是我在jsfiddle上的代码

我不明白如何在甜甜圈图表的片段中添加标签?

javascript charts html5 labels d3.js

12
推荐指数
2
解决办法
2万
查看次数

d3.json,d3.xhr和跨域问题

今天我做了几个与我们用d3加载json文件的方式相关的测试,因为我对这个问题很感兴趣:d3.json有效但$ .getJson失败了.但是我做的一些测试有点棘手.

d3.xhr("http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&query=select+*+where+%7B%3Chttp%3A%2F%2Fdbpedia.org%2Fresource%2FRoger_Federer%3E+%3Fp+%3Fo+filter%28lang%28%3Fo%29+%3D+%27en%27%29%7D%0D%0A&debug=on&timeout=&format=application%2Fsparql-results%2Bjson&save=display&fname=", function(data)
console.log("success1"); 
alert(data);
});

d3.json("http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&query=select+*+where+%7B%3Chttp%3A%2F%2Fdbpedia.org%2Fresource%2FRoger_Federer%3E+%3Fp+%3Fo+filter%28lang%28%3Fo%29+%3D+%27en%27%29%7D%0D%0A&debug=on&timeout=&format=application%2Fsparql-results%2Bjson&save=display&fname=", function(data){              console.log("success2");
alert(data);
});


d3.xhr("http://api.worldbank.org/countries/BRA/indicators/BX.KLT.DINV.CD.WD?per_page=10&date=2007:2012&format=json", function(data){
console.log("success3");
alert(data);
})

d3.json("http://api.worldbank.org/countries/BRA/indicators/BX.KLT.DINV.CD.WD?per_page=10&date=2007:2012&format=json", function(data){
console.log("success4");
alert(data);
})
Run Code Online (Sandbox Code Playgroud)

我知道问题可能至少有两个原因:MIME类型和CORS,但我无法理解其他几件事:

  1. 如果总是执行回调(有时甚至很难用OK 200,这也可能是从jQuery的.ajax()和.getJSON()方法中看到的错误)为什么我只能在一个案例中看到数据(第一个) - 其余案件总是错误?

  2. d3.xhr方法支持哪些MIME类型?

  3. 如果d3.json只是d3.xhr的一个很好的包装器,为什么示例1工作而示例2不起作用...?我想澄清一下.我主要使用d3和我的服务器上的文件,但是当我还需要使用一些外部数据时,有这样的情况,并且使用D3,而不仅仅是使用jQuery,这样做非常好.

我认为应该有一个列表,其中包含这些方法接受的所有MIME类型.

jquery json cors mime-types d3.js

10
推荐指数
1
解决办法
1万
查看次数

d3不透明度转换闪烁最终状态

我有许多基本的不透明度过渡

emp_line.transition()
    .duration(1250)
    .attr('opacity', 1)
Run Code Online (Sandbox Code Playgroud)

但是,当我运行它们时,这些项目通常会闪烁到完全不透明,然后回到无,然后淡入.有没有办法防止这些内容闪烁?

javascript transition d3.js

9
推荐指数
1
解决办法
2万
查看次数