更新:我已经在答案部分发布并接受了一个完整的解决方案.本节中的任何代码都将用作与您自己的非工作代码进行比较的参考,但不能用作解决方案.
我正在构建一个仪表板并使用d3.js添加一个世界地图,该地图将根据地理位置实时绘制推文.
d3.json()行中引用的world.json文件可以在这里下载(它叫做world-countries.json).
该地图作为SVG容器在页面上,并使用d3呈现.
以下是相关的代码片.
<div id="mapContainer">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="500"></svg>
</div>
Run Code Online (Sandbox Code Playgroud)
#mapContainer svg {
display:block;
margin:0 auto;
}
#mapContainer path {
fill:#DDD;
stroke:#FFF;
}
Run Code Online (Sandbox Code Playgroud)
// generate US plot
function draw() {
var map = d3.select("svg");
var width = $("svg").parent().width();
var height = $("svg").parent().height();
var projection = d3.geo.equirectangular().scale(185).translate([width/2, height/2]);
var path = d3.geo.path().projection(projection);
d3.json('plugins/maps/world.json', function(collection) {
map.selectAll('path').data(collection.features).enter()
.append('path')
.attr('d', path)
.attr("width", width)
.attr("height", height);
});
}
draw();
latestLoop();
Run Code Online (Sandbox Code Playgroud)
$(window).resize(function() {
draw();
});
Run Code Online (Sandbox Code Playgroud)
更新:我已将地图缩放到可接受的大小(对于我的特定浏览器大小),但是当我更改窗口大小时,它仍然不会缩放和居中.但是,如果我调整窗口大小,然后点击刷新,则重新加载页面后地图将居中.但是,由于比例是静态的,因此不能正确缩放.
我正在尝试使用Flexbox构建"Holy Grail"布局.
见下文:
除了标题下方"app"区域的高度外,我一切正常.现在它是100vh(视口高度的100%),但这包括64px标题.
我尝试计算(100vh - 64px),但这与flex不相符.
这是我的基本HTML结构:
<main>
<header></header>
<app>
<nav>Left Nav</nav>
<article>Content</article>
<aside>Right Nav</aside>
</app>
</main>
Run Code Online (Sandbox Code Playgroud)
和支持CSS:
main {
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 0 64px;
display: flex;
}
app {
flex: 1 1 100vh;
display: flex;
}
nav {
flex: 0 0 256px;
order: 0;
}
article {
flex: 1 1 100px;
order: 1;
}
aside {
flex: 0 0 256px;
order: 2;
}
Run Code Online (Sandbox Code Playgroud)
我正在使用Google Material Design组件,这些组件为了简单起见而被拆除,然后在加载页面时更加完整.以下简化说明问题:
index.html文件中显示的内容:
<div class="switch"></div>
加载页面时呈现给DOM的内容:
<div class="switch">
<div class="switch_track"></div>
<div class="switch_thumb"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
我正在创建一个拖放HTML编辑器,并为每个组件类型提供模板文件.交换机的模板文件很简单:
switch.html
<div class="switch"></div>
问题是我将它拖到画布上.jQuery查看switch.html
并呈现<div class="switch"></div>
给DOM,但由于它是动态添加的,因此添加额外轨道和缩略图标记的脚本不会"看到"它.
我该如何解决这个问题,以便每当DOM更新时,它会重新运行任何脚本?理想情况下,我想避免触及任何Material Design脚本文件.
我的公司列出了Trello(私人董事会)的当前项目,我们希望通过连接到董事会在我们的网站上显示它们,以便它们始终是最新的.
使用此示例,我现在可以拉出卡片并在页面上渲染它们,但只有在您单击"连接到Trello"之后.
为什么用户需要连接?它们是我在MY板上的MY卡,所以有没有办法只是......向他们展示卡片(他们只需要是只读的......用户无法编辑/与他们互动)?Trello应该只需要验证我,而不是访问我网站的访问者.
有没有代码解决方案?
这是我目前的JS片段:
<script src="https://api.trello.com/1/client.js?key=[MY-APP-KEY]"></script>
<script>
var onAuthorize = function() {
updateLoggedIn();
$("#projects").empty();
Trello.members.get("me", function(member){
var $item = "<tr><td class='subhead disabled'>Loading projects...</td></tr>";
$("#projects").html($item);
// Output a list of all of the cards that the member
// is assigned to
Trello.lists.get("[MY-TRELLO-LIST-ID]/cards", function(cards) {
$("#projects").html("");
$item = "";
$.each(cards, function(ix, card) {
// OUTPUT THEM ON THE PAGE
$("#projects").append($item);
});
});
});
};
var updateLoggedIn = function() {
var isLoggedIn = Trello.authorized();
$("#loggedout").toggle(!isLoggedIn);
$("#loggedin").toggle(isLoggedIn);
};
var …
Run Code Online (Sandbox Code Playgroud) 任何iOS10 beta测试人员都知道如果Messages使用类似于Facebook Open Graph的语法来设置元描述和图像等内容吗?
我正在建立一个网站,并希望在iOS10推出时做好准备.
这是我正在谈论的东西的类型:
<!-- Facebook Meta -->
<meta property="og:title" content="Site | Title of Page" />
<meta property="og:image" content="http://www.domain.com/im-content/social-post-images/facebook image.png" />
<meta property="og:url" content="http://www.domain.com" />
<meta property="og:site-name" content="Site | Title of Page"/>
<meta property="og:type" content="website" />
<meta property="og:description" content="Here is a description of my site that will show up in the Facebook card." />
Run Code Online (Sandbox Code Playgroud)
这是我试图控制的图像/信息:
我想重新创建这个横向规则:
我有双线,但我不知道如何在中心获得某种角色或图像.我想我可以使用:before和:after,但我不知道如何在这种情况下使用它们.为了回答这个问题,我们试着让中心角色成为一个角色.我稍后会弄清楚图像/图标.
想法?这是我的代码:
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #444;
border-bottom:1px solid #444;
margin:25px 0px;
}
Run Code Online (Sandbox Code Playgroud) 由VEGA BELOW解决.这是工作的好消息.我将保留整个帖子以供将来的访问者查看此问题是如何解决的.
我正在尝试创建一个按钮,当它悬停时,会在下面的抽屉上显示一些信息.
我想让它很容易实现到一个页面,所以我把它变成了一个jQuery小部件.我想根据按钮和/或抽屉上的内容进行调整,但现在没有这样做.用户应该能够将单个HTML div标记与隐藏数据放在一起,它才能正常工作.
理想地,按钮/抽屉宽度将调整到两者之间的最大值,以使抽屉在处于闭合状态时完全隐藏.我只是不希望我的用户不得不设置固定宽度.
我需要帮助!
这是它的样子:
相关HTML(小提琴中的完整HTML ):
<div class="download" data-value="It's awesome!">Visit Website</div>
Run Code Online (Sandbox Code Playgroud)
相关CSS(小提琴中的完整CSS ):
.button {
position:absolute;
padding:10px;
}
.drawer {
box-sizing:border-box;
z-index:-1;
position:absolute;
top:3px;
left:3px;
padding:6px 10px;
text-align:center;
-webkit-transition:0.3s left ease-in;
}
Run Code Online (Sandbox Code Playgroud)
相关的jQuery(小提琴中的完整jQuery ):
$(function() {
$(".button").each(function() {
$(this).append("<div class='drawer'>" + $(this).data('value') + "<div class='handle'>||</div></div>");
$(".drawer", this).css("width", $(".button").width());
});
$(".button").mouseenter(function() {
$(".drawer", this).css("left", $(".button").outerWidth());
}).mouseleave(function() {
$(".drawer", this).css("left", "3px");
});
});
Run Code Online (Sandbox Code Playgroud) 更新:仍然无法正常工作:(我已更新代码部分以反映我目前拥有的内容.
对于使用过TinyXML的人来说,这应该是一个非常简单的问题.我正在尝试使用TinyXML来解析XML文档并提取一些值.我想出了昨天如何在库中添加,我已经成功加载了文档(嘿,这是一个开始).
我一直在阅读手册,我无法弄清楚如何提取个人属性.谷歌搜索后,我还没有找到我的具体例子的例子,所以也许这里使用过TinyXML的人可以提供帮助.下面是XML的一部分,我已经开始解析它了.
XML:
<EGCs xmlns="http://tempuri.org/XMLSchema.xsd">
<card type="EGC1">
<offsets>
[ ... ]
</offsets>
</card>
<card type="EGC2">
<offsets>
[ ... ]
</offsets>
</card>
</EGCs>
Run Code Online (Sandbox Code Playgroud)
加载/解析代码:
TiXmlDocument doc("EGC_Cards.xml");
if(doc.LoadFile())
{
TiXmlHandle hDoc(&doc);
TiXmlElement* pElem;
TiXmlHandle hRoot(0);
pElem = hDoc.FirstChildElement().Element();
if (!pElem) return false;
hRoot = TiXmlHandle(pElem);
//const char *attribval = hRoot.FirstChild("card").ToElement()->Attribute("card");
pElem = hDoc.FirstChild("EGCs").Child("card", 1).ToElement();
if(pElem)
{
const char* tmp = pElem->GetText();
CComboBox *combo = (CComboBox*)GetDlgItem(IDC_EGC_CARD_TYPE);
combo->AddString(tmp);
}
}
Run Code Online (Sandbox Code Playgroud)
我想拉出每张卡片"type"并将其保存为字符串以放入组合框中.如何访问此属性成员?
我有一个文本文件,其中包含大约850万个数据点:
Company 87178481
Company 893489
Company 2345788
[...]
Run Code Online (Sandbox Code Playgroud)
我想使用Python创建连接图,以查看公司之间的网络状况.从上面的示例中,如果第二列中的值相同,则两家公司将共享优势(来自/为Hooked澄清).
我一直在使用NetworkX软件包并且已经能够生成几千个网络,但它并没有通过完整的850万节点文本文件.我跑了它并离开了大约15个小时,当我回来时,shell中的光标仍然闪烁,但是没有输出图.
假设它仍在运行是否安全?是否有更好/更快/更容易的方法来绘制数百万点?
我正在收集一些推文,我很乐意输出他们今天,昨天或之前是否进来.这是我正在使用的代码(不起作用).它正在跳过if和else if和直接去其他地方.
date_default_timezone_set("America/New_York");
$time = $block["created_at"];
$time = strtotime($time);
if(date("now") == date("m-d-Y", $time)) {
$time = date("g:ia", $time);
}
else if(date(strtotime("-1 day")) == date("m-d-Y", $time)) {
$time = "Yesterday at" + date("g:ia", $time);
}
else {
$time = date("m-d-Y g:ia", $time);
}
Run Code Online (Sandbox Code Playgroud)
绝对理想的情况是,如果时间戳在过去的6天内,它会显示星期几和时间,而且比这更早的任何内容都会显示日期,我也会喜欢它.
所以流可能看起来像这样(日期排序降序):
[...]上午9:53
[...]上午7:02
[...]昨天晚上11:24
[...]周一下午3:45
[...] 2013年1月2日
知道我的代码出错了吗?谢谢!