小编And*_*eid的帖子

早上好,我花了很多时间弄清楚如何在情节上直接添加国家名称,而不是像传奇的一部分,而是像地图的一部分.我正在使用包rworldmap,尝试使用identifyCountries ()- 但它是用于交互的东西(当用户点击地图时),而不是我找到了一个这样的解决方案 一个国家的行政区域地图与ggmap和ggplot2,但它是ggplot2,太复杂了.我试着这样做mapCountryData().希望对你有所帮助,谢谢.

data <- data.frame(Country=c('Russia','Cyprus', 'Belize', 'Austria' ,'Virgin Islands', 
        'Italy','United States' ,'United Kingdom', 'Germany', 'France' ,'Poland' ,'Switzerland'),
Value=c(-0.310,-0.206,-0.300,-0.179,-0.196,-0.174,-0.105,-0.142,-0.082,-0.097,-0.027,0.052))

    library('rworldmap')

    pdf1 <- joinCountryData2Map(data, joinCode="NAME", nameJoinColumn="Country")

    mapCountryData(pdf1, nameColumnToPlot="Value", catMethod="pretty", 
    colourPalette='white2Black',addLegend='TRUE',mapTitle=NULL, mapRegion="Europe")

我想在 R 中使用R2D3 pacakge，但不确定这个包与 D3.js 库的关系。R2D3 是否以任何方式限制了 D3 的功能？我们可以在 R2D3 中使用 R 中的所有 D3 函数和特性吗？

我正在尝试创建“流程图/工作流”类型的图表/表示。每个节点都是一个“任务”，然后我们将绘制线条将每个任务连接到下一个任务，以便我们可以布局工作流。

这个例子非常接近我们想要的，所以我们选择了它作为“跳跃点”。

您可以在此处查看此示例的代码。

这是工作中的一个片段：

/*
Copyright (c) 2013 Ross Kirsling

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions: …

我按照指南在 d3js 中创建了美国的基本地图

指南链接 - http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922。

我已经了解了 GeoJSON 和地图投影的基础知识。

目前我的地图看起来像这样 - （地图 1） - 这使用d3.geoAlbersUsa()投影

我希望我的地图看起来像这样 - （地图 2） - 即顶部不是弯曲的，而是直线边界

链接https://www.worldatlas.com/webimage/countrys/namerica/usstates/usa50mer.htm

要求 -

1. 我想让阿拉斯加和夏威夷在地图中保持可见，就像两幅图像中一样

我已经尝试过什么 -

1. 我尝试过使用d3.geoMercator()投影，但阿拉斯加太大，无法容纳在视口中，并且位于我不想要的左上角。

我是 d3.js 的新手。文档告诉我.selectAll“选择与指定选择器字符串匹配的所有元素”。但是当我尝试使用d3.selectAll("p").selectAll("b")获取b以下 html 代码中的所有元素时，未选择最后一个 b 元素：

<p>
    <b>selected</b>
    <b>selected</b>
    <h4>some word</h4>
    <b>not selected</b>
</p>

有人可以帮我解决这个问题吗？谢谢！

<p>
    <b>selected</b>
    <b>selected</b>
    <h4>some word</h4>
    <b>not selected</b>
</p>

var selection = d3.selectAll("p").selectAll("b");

console.log("b elements selected: ", selection.size());

所以我在D3js中有一个折线图.我在积分上添加了svg圈.如果用户将鼠标悬停在该圈子上,则会看到工具提示.

https://jsfiddle.net/jhynag08/38/

但我希望他们在靠近圆圈时看到工具提示(可能在5-10px范围内).我知道我可以添加一个背景矩形(全宽和高度)并做这样的事情 - > https://jsfiddle.net/53aLmt7r/1/

svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
  focus.style("display", null);
})
.on("mouseout", function() {
  focus.style("display", "none");
})
.on("mousemove", mousemove);

但我在折线图中也有条形图.因此,如果我尝试使用此方法,当我将鼠标悬停在条形图上时,我再也无法获得条形图的工具提示.

有没有办法在悬停工作的折线图周围有一些"活动区域"？

当我通过单击鼠标缩放到特定位置然后尝试平移或使用鼠标滚轮时，缩放行为会跳跃。似乎我的缩放级别正在恢复，就像单击鼠标之前一样。

这是我的事件处理程序：

function click(d) {
    var x, y, k;

    if (d && centered !== d) {
       var centroid = path.centroid(d);
       x = centroid[0];
       y = centroid[1];
       k = 4;
       centered = d;
     } else {
       x = width / 2;
       y = height / 2;
       k = 1;
       centered = null;
    }


    svgContainer.transition()
       .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")");
} …

我可以对 d3v7 中的路径应用缩放。但是，如何才能仅在 x 轴上缩放而不是标准缩放呢？

(1)我如何调用缩放功能：

var svgArea = d3.select('#svg');
const path = svgArea.append("path");
const line = d3.line()
    .x(d => scale.x(d.sample))
    .y(d => scale.y(d.value));
path
    .datum(dataset)
    .attr("fill", fillColor)
    .attr("stroke", color)
    .attr("d", line);
svgArea.call(zoom, padding, width, height, path);

(2) 变焦功能

function zoom(svg, padding, width, height, path) {

    var extent = [
        [padding, padding],
        [width, height]
    ];

    var zooming = d3.zoom()
        .scaleExtent([1, 3])
        .translateExtent(extent)
        .extent(extent)
        .on("zoom", zoomed);

    svg.call(zooming);

    function zoomed(e) {
        path.attr("transform", e.transform);
    }
}

我正在学习 D3.js 并对方法链感到好奇

此脚本有效：

var data = [32, 57, 112, 250]

var svg = d3.select("svg")

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30 })
    .attr("r", function(d) { return Math.sqrt(d); })

但是这个脚本没有任何结果：

var data = [32, 57, 112, 250]

var circles = d3.select("svg").selectAll("circle");
circles.data(data);

var circlesEnter = circles
    .enter()
    .append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30})
    .attr("r", function (d) { return Math.sqrt(d)})

我没有看到对这两种不同方法的不同影响。谁能告诉我这两者的区别？

提前致谢！

对于包含 d3-drag 拖动功能的 d3 force 布局，似乎每个拖动事件调用的函数都修改d.fx/ d.fy，例如：

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

拖动开始事件通常基于d.fx/d.fy在d.x/d.y而结束事件设置d.fx/d.fy到null。

d.fx/d.fy来自哪里以及为什么它会用于被拖动的元素？这是否以某种方式内置于 d3 或 d3-force 中？它在哪里分配给被拖动的元素？