标签: javascript
如何使用D3.js将图像添加到svg容器
我已经创建了一个示例Asp.Net MVC 4应用程序,其中我使用D3.js附加一个SVG元素,然后在SVG中我附加了一个文本元素(参见下面的代码).这一切都正常,直到我尝试使用本地png文件将img附加到SVG.img会附加到DOM,但img不会在页面上呈现.我在这里做错了什么想法,以及如何修复它？
@{
ViewBag.Title = "Home Page";
}
<script src="~/Scripts/d3.v3.js"></script>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 100)
.style("border", "1px solid black");
var text = svg.selectAll("text")
.data([0])
.enter()
.append("text")
.text("Testing")
.attr("x", "40")
.attr("y", "60");
var imgs = svg.selectAll("img").data([0]);
imgs.enter()
.append("img")
.attr("xlink:href", "@Url.Content("~/Content/images/icons/refresh.png")")
.attr("x", "60")
.attr("y", "60")
.attr("width", "20")
.attr("height", "20");
</script>
@Richard Marr - 下面是尝试在直接HTML中做同样的事情,这给了我相同的结果.我不确定我的代码以这种方式从本地驱动器获取refresh.png文件.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.js"></script>
</head>
<body>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", …推荐指数
解决办法
查看次数
如何获取Rails资产管道以生成源映射？
我想让Rails在编译的coffeescript/minified JS旁边生成源映射,以便更好地记录错误.但是,网上似乎没有关于如何执行此操作的全面文档.有没有人这样做过？
我在Rails 3.2和Heroku上.
推荐指数
解决办法
查看次数
Angular.js:在页面加载时设置元素高度
我是AngularJS的新手.我想创建网格(使用ng-grid),其高度取决于窗口高度,即.$('.gridStyle').height($(window).height() - 100);
我写了指令:
app.directive('resize', function($window) {
return function(scope, element) {
function applyHeight() {
scope.height = $window.innerHeight;
$('.gridStyle').height(scope.height - 100);
}
angular.element($window).bind('resize', function() {
scope.$apply(function() {
applyHeight();
});
});
applyHeight();
};
});
这在我调整浏览器窗口大小时很有效,但是第一次加载网站时不应用样式.我在哪里可以将代码放入高度？
推荐指数
解决办法
查看次数
使用Promise等待轮询条件满足
我需要创建一个JavaScript Promise,在特定条件为真之前无法解析.假设我有第三方库,我需要等到该库中存在某种数据条件.
我感兴趣的场景是除了简单的轮询之外无法知道何时满足这个条件的场景.
我可以创建一个等待它的承诺 - 这段代码可以工作,但有没有更好或更简洁的方法解决这个问题？
function ensureFooIsSet() {
return new Promise(function (resolve, reject) {
waitForFoo(resolve);
});
}
function waitForFoo(resolve) {
if (!lib.foo) {
setTimeout(waitForFoo.bind(this, resolve), 30);
} else {
resolve();
}
}
用法:
ensureFooIsSet().then(function(){
...
});
我通常会实现最大轮询时间,但不希望这样在这里解决问题.
推荐指数
解决办法
查看次数
JSlint:意外'换'
我一直在测试单选按钮.一切似乎没问题,直到我通过JS lint运行它.我修复了除一个之外的所有错误
出乎意料的'为'
for (i = 0; i < radios.length; i += 1) {
这是我的Javascript:
/*global body,window,document,alert*/
(function () {
"use strict";
var UIlogic;
UIlogic = {
myLoad: function () {
var elems, elemText, btn1, winter, summer, fall, spring, header, btns;
winter = "<div><input type='radio' name='cb' id='cbA' value='0'/><label for='cbA'>Winter</label></div>";
summer = "<div><input type='radio' name='cb' id='cbB' value='1'/><label for='cbB'>Summer</label></div>";
fall = "<div><input type='radio' name='cb' id='cbC' value='2'/><label for='cbC'>Fall</label></div>";
spring = "<div><input type='radio' name='cb' id='cbD' value='3'/><label for='cbD'>Spring</label></div>";
header = "Header";
btns = "<br /><button …推荐指数
解决办法
查看次数
ECMAScript规范中的`new Object` vs`Object`
所以,我在定义什么new Object和Object做什么时看着ES5规范.出乎我的意料:
new Object描述了对象构造函数如何工作的整个算法 - 处理不同类型的值所发生的事情.基本上调用ToObject非对象 - 对象上的标识和构建在null和undefined上.Object在null和undefined中有一个特殊的第一步,它构建一个对象,然后调用对象ToObject上的基元和标识.
在阅读了几次描述之后 - 它们看起来完全相同.但是,很明显,从规范中他们做了不同的事情.例如,在Array调用new Array中指定函数调用Array(…)等同于new Array(…)具有相同参数的对象创建表达式
那么 - 和之间有什么区别？为什么他们指定不同？new ObjectObject
推荐指数
解决办法
查看次数
使用Node解析XLSX并创建json
好的,所以我发现这个记录非常好,node_module名为js-xlsx
问题: 如何解析xlsx以输出json？
以下是Excel工作表的样子:
最后,json应如下所示:
[
{
"id": 1,
"Headline": "Team: Sally Pearson",
"Location": "Austrailia",
"BodyText": "...",
"Media: "..."
},
{
"id": 2,
"Headline": "Team: Rebeca Andrade",
"Location": "Brazil",
"BodyText": "...",
"Media: "..."
}
]
index.js:
if(typeof require !== 'undefined') {
console.log('hey');
XLSX = require('xlsx');
}
var workbook = XLSX.readFile('./assets/visa.xlsx');
var sheet_name_list = workbook.SheetNames;
sheet_name_list.forEach(function(y) { /* iterate through sheets */
var worksheet = workbook.Sheets[y];
for (z in worksheet) {
/* all keys that do …推荐指数
解决办法
查看次数
reactjs - 如何设置backgroundcolor的内联样式？
我想设置一些元素的样式属性,但我没有正确的语法.任何人都可以建议我错在哪里？
import React from 'react';
import debug from 'debug'
const log = debug('app:component:Header');
var bgColors = { "Default": "#81b71a",
"Blue": "#00B1E1",
"Cyan": "#37BC9B",
"Green": "#8CC152",
"Red": "#E9573F",
"Yellow": "#F6BB42",
};
export default class SideBar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<a style="{{backgroundColor: {bgColors.Default}}}" >default</a>
<a style="{{backgroundColor: {bgColors.Blue}}}" >blue</a>
<a style="{{backgroundColor: {bgColors.Cyan}}}" >cyan</a>
<a style="{{backgroundColor: {bgColors.Green}}}" >green</a>
<a style="{{backgroundColor: {bgColors.Red}}}" >red</a>
<a style="{{backgroundColor: {bgColors.Yellow}}}" >yellow</a>
);
}
}
更新:对于任何看这个的人,请参阅评论这不是正常工作的代码.
推荐指数
解决办法
查看次数
为什么在ES6的箭头函数中没有定义参数？
对于此代码
var sum = () => {console.log(arguments); ... }
sum(2, 3)
得到错误Uncaught ReferenceError: arguments is not defined.
为什么arguments没有在箭头功能中定义？
推荐指数
解决办法
查看次数
ES6动态类名
我一直在试验ES6类,我想知道你是否可以动态更改类名？例如
class [Some dynamic name] {};
推荐指数
解决办法
查看次数