小编Jon*_*Jon的帖子

d3.js Map(<svg>)自动适应父容器并使用Window调整大小

更新:我已经在答案部分发布并接受了一个完整的解决方案.本节中的任何代码都将用作与您自己的非工作代码进行比较的参考,但不能用作解决方案.


我正在构建一个仪表板并使用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)

更新:我已将地图缩放到可接受的大小(对于我的特定浏览器大小),但是当我更改窗口大小时,它仍然不会缩放和居中.但是,如果我调整窗口大小,然后点击刷新,则重新加载页面后地图将居中.但是,由于比例是静态的,因此不能正确缩放.

在此输入图像描述

css svg canvas d3.js

30
推荐指数
3
解决办法
6万
查看次数

Flexbox Holy Grail布局:固定标题,固定左导航,流体内容区域,固定右侧边栏

我正在尝试使用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)

- …

html css css3 flexbox

20
推荐指数
1
解决办法
8514
查看次数

如何更新/刷新我动态添加到页面的Google MDL元素?

我正在使用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脚本文件.

html jquery dynamic

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

显示来自私人Trello板的卡,无需访问者需要Trello帐户,或者需要通过弹出窗口进行授权

我的公司列出了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)

javascript php jquery trello

14
推荐指数
1
解决办法
1729
查看次数

iOS10消息链接预览图像

任何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)

这是我试图控制的图像/信息:

在此输入图像描述

facebook ios facebook-opengraph twitter-card ios10

11
推荐指数
1
解决办法
6624
查看次数

自定义<hr>,图像/字符位于中心

我想重新创建这个横向规则:

在此输入图像描述

我有双线,但我不知道如何在中心获得某种角色或图像.我想我可以使用: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)

css horizontal-line

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

无法计算隐藏div的宽度

由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)

css jquery

8
推荐指数
1
解决办法
169
查看次数

使用TinyXML解析XML元素

更新:仍然无法正常工作:(我已更新代码部分以反映我目前拥有的内容.

对于使用过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"并将其保存为字符串以放入组合框中.如何访问此属性成员?

c++ xml tinyxml xml-parsing

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

使用Python生成连接/网络图

我有一个文本文件,其中包含大约850万个数据点:

Company 87178481
Company 893489
Company 2345788
[...]
Run Code Online (Sandbox Code Playgroud)

我想使用Python创建连接图,以查看公司之间的网络状况.从上面的示例中,如果第二列中的值相同,则两家公司将共享优势(来自/为Hooked澄清).

我一直在使用NetworkX软件包并且已经能够生成几千个网络,但它并没有通过完整的850万节点文本文件.我跑了它并离开了大约15个小时,当我回来时,shell中的光标仍然闪烁,但是没有输出图.

假设它仍在运行是否安全?是否有更好/更快/更容易的方法来绘制数百万点?

python networkx

6
推荐指数
1
解决办法
2625
查看次数

今天,昨天和本周的日期变为相对的,人类可读的格式

我正在收集一些推文,我很乐意输出他们今天,昨天或之前是否进来.这是我正在使用的代码(不起作用).它正在跳过ifelse 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日

知道我的代码出错了吗?谢谢!

php datetime date

6
推荐指数
2
解决办法
3031
查看次数