相关疑难解决方法(0)
获取屏幕大小,当前网页和浏览器窗口
我怎样才能得到windowWidth,windowHeight,pageWidth,pageHeight,screenWidth,screenHeight,pageX,pageY,screenX,screenY将在所有主要浏览器工作？
1927
推荐指数
推荐指数
15
解决办法
解决办法
144万
查看次数
查看次数
使d3.js可视化布局响应的最佳方法是什么？
假设我有一个直方图脚本,可以构建一个960 500 svg图形.如何调整响应,以便调整图形宽度和高度是动态的？
<script>
var n = 10000, // number of trials
m = 10, // number of random variables
data = [];
// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i++) {
for (var s = 0, j = 0; j < m; j++) {
s += Math.random();
}
data.push(s);
}
var histogram = d3.layout.histogram()
(data);
var width = 960,
height = 500;
var x = d3.scale.ordinal()
.domain(histogram.map(function(d) { return d.x; }))
.rangeRoundBands([0, width]); …218
推荐指数
推荐指数
4
解决办法
解决办法
11万
查看次数
查看次数
如何使用d3.js选择器删除处理程序
我使用我正在更新的d3选择器意外地将相同的事件处理程序覆盖在svg元素之上.
add_listeners = function() {
d3.selectAll(".nodes").on("click", function() {
//Event handler to highlight clicked d3 element
});
jQuery('#some_navigation_button').on('click', function() {
//Event handler
});
jQuery('#some_refresh_button').on('click', function() {
//Event handler that re-draws some d3 svg elements
});
//... 5 other navigation and d3 handlers
}
将add_listeners()重新添加相同的处理程序.所以我试过了
add_listeners = function() {
d3.selectAll(".nodes").off();
jQuery('#some_navigation_button').off();
jQuery('#some_refresh_button').off();
d3.selectAll(".nodes").on("click", function() {
//Event handler
});
jQuery('#some_navigation_button').on('click', function() {
//Event handler
});
jQuery('#some_refresh_button').on('click', function() {
//Event handler that re-draws some d3 svg elements
});
//... 5 other navigation …24
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
如何有多个d3窗口调整大小事件
我svg在一个页面上有三个元素,每个元素由D3陪伴.每个人都有自己的页面调整大小逻辑,由我编写的简单模块分配,以使其响应.
问题是只有最后一个resize事件被触发,因为它似乎覆盖了之前的页面调整大小事件.这是预期的行为d3.select(window).on('resize', ...)吗？我已经习惯了$(window).resize(...),多次调用时效果很好.
我已经看到这个先前的答案表明在D3中可能有多个调整大小事件.我在做一些蠢事吗？
这是一个我坚持使用jsFiddle的简单示例:
d3.select(window).on("resize", function() {
d3.select("#d3console").append("div").html("d3 resize event A!");
});
d3.select(window).on("resize", function() {
d3.select("#d3console").append("div").html("d3 resize event B!");
});
$(window).bind("resize", function() {
d3.select("#jQconsole").append("div").html("jQ resize event A!");
});
$(window).bind("resize", function() {
d3.select("#jQconsole").append("div").html("jQ resize event B!");
});
哪个输出:
d3 resize event B!
d3 resize event B!
jQ resize event A!
jQ resize event B!
jQ resize event A!
jQ resize event B!
我知道可以继续将之前的调整大小功能分流到像这样的链中.刚想到D3的不同行为.
12
推荐指数
推荐指数
1
解决办法
解决办法
4271
查看次数
查看次数
D3 svg组件无法调整大小
我用Angular 4和创建一个应用程序D3.当我svg通过将组件注入另一个组件从组件内部创建组件时,它显示组件,但调整大小和移动功能不起作用(甚至调整大小和移动游标不会在悬停时显示).如果我使用相同的组件并导航到具有路由的组件,则调整大小和移动功能是有效的.知道为什么.
以下是我使用的组件.
import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
@Component({
selector: 'app-function-box',
templateUrl: './function-box.component.html',
styleUrls: ['./function-box.component.css']
})
export class FunctionBoxComponent implements OnInit {
constructor() { }
ngOnInit() {
}
w = 500;
h = 350;
r = 120;
width = 200;
height = 100;
dragbarw = 10;
svg = d3.select("body").append("svg")
.attr("width", this.w)
.attr("height", this.h);
newg = this.svg.append("g")
.data([{x: 400, y: 100}]); //position
dragrect = this.newg.append("rect")
.attr("id", "active") …8
推荐指数
推荐指数
1
解决办法
解决办法
172
查看次数
查看次数
在d3中制作动画弧响应？
我在d3看这个动画,
http://bl.ocks.org/mbostock/5100636
我想知道有没有办法让这个响应,所以大小随着浏览器窗口的大小调整而改变？或者如果使用raphael.js会更容易？
这是代码:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500,
? = 2 * Math.PI; // http://tauday.com/tau-manifesto
// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arc = d3.svg.arc()
.innerRadius(180)
.outerRadius(240)
.startAngle(0);
// Create the SVG …4
推荐指数
推荐指数
1
解决办法
解决办法
1721
查看次数
查看次数
使D3.js 2D图表图表响应
首先,我想说清楚我确实通过stackoverflow中发布的以下链接:
以下是jsfiddle和代码的链接:https://jsfiddle.net/adityap16/d61gtadm/8/
码-
var data = [
{"mytime": "2015-12-01T11:10:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:15:00.000Z", "value": 67},
{"mytime": "2015-12-01T11:20:00.000Z", "value": 70},
{"mytime": "2015-12-01T11:25:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:30:00.000Z", "value": 72},
{"mytime": "2015-12-01T11:35:00.000Z", "value": 75},
{"mytime": "2015-12-01T11:40:00.000Z", "value": 71},
{"mytime": "2015-12-01T11:45:00.000Z", "value": 80}
];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
data.forEach(function(d) {
d.mytime = parseDate(d.mytime);
});
//var margin = { top: 30, right: 30, bottom: 40, left:50 },
var margin = { top: 30, right: 30, bottom: 40, left:50 },
height = 200, …2
推荐指数
推荐指数
1
解决办法
解决办法
1776
查看次数
查看次数
使D3图表在React app中响应
我目前正在尝试使用D3在React中渲染绘图.为了整合它们,我使用了以下链接:
http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/.
我还尝试了链接中提供的解决方案,使图表响应:
虽然它在与React集成时在独立代码中运行良好但它开始省略滴答.仅为D3工作jsfiddle:https://jsfiddle.net/adityap16/11edxrnq/1/
独立代码D3:
var data = [
{"mytime": "2015-12-01T11:10:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:15:00.000Z", "value": 67},
{"mytime": "2015-12-01T11:20:00.000Z", "value": 70},
{"mytime": "2015-12-01T11:25:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:30:00.000Z", "value": 72},
{"mytime": "2015-12-01T11:35:00.000Z", "value": 75},
{"mytime": "2015-12-01T11:40:00.000Z", "value": 71},
{"mytime": "2015-12-01T11:45:00.000Z", "value": 80}
];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
data.forEach(function(d) {
d.mytime = parseDate(d.mytime);
});
//var margin = { top: 30, right: 30, bottom: 40, left:50 },
var margin = { top: 30, right: 30, bottom: 40, left:50 }, …2
推荐指数
推荐指数
1
解决办法
解决办法
3847
查看次数
查看次数