riccardoscalco / textures Goto Github PK
View Code? Open in Web Editor NEWTextures.js is a JavaScript library for creating SVG patterns
Home Page: http://riccardoscalco.github.io/textures/
License: MIT License
Textures.js is a JavaScript library for creating SVG patterns
Home Page: http://riccardoscalco.github.io/textures/
License: MIT License
Hi,
I'm hitting this error when implementing the "getting started" example on your webpage:
textures.inc.js:208 Uncaught TypeError: this.append is not a function
I'm using:
d3 v4.2.0
textures v1.0.3
Any ideas?
Cheers.
Hey guys, love these textures. Any way to download use this svg library in Sketch app for design?
Thanks!
Please host static assets on a content delivery network such as CDNJS.com, so that developers can integrate Textures.js more easily into our applications!
I am wondering if there's a way to coordinate texture fill with responsive d3 map? It seems that the strokes will disappear while background color remains. It could be just me.
Thank you.
d3js.org does not support https you must http explicitly.
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
Hi there! π
I was just browsing for data visualization-related libraries and modules for the product I'm working on, and came across your amazing work here.
While I was scrolling through the page, one of my devs walked by and stopped to check out what I was looking at. Impressed, he asked me if the map was also an .svg, and when I checked it out, we both discovered it wasn't.
I did a quick google and found this awesome collection of country maps in svg format.
If you're feeling like updating the site anytime soon, maybe consider this resource so the whole page is rendered w/ svgs! π
There seem to be a few things breaking with D3v4. I think most of them are related to D3's updated selection methods.
For the sake of parsimony, the multi-value map methods have been extracted to d3-selection-multi and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: selection.attrs, selection.styles and selection.properties.
Changing all the .attr
calls to .attr
is east enough. But changes to selection.call
seem like they're going to be trickier.
The selection.call method no longer sets the this context when invoking the specified function; the selection is passed as the first argument to the function, so use that.
I'm having issues with call
in other places too, but I'm trying to get this working.
I'm attempting to use the custom path tool to create some shapes that are filled. When I attempt to chain the .fill('#fff')
method, I'm getting an error. Is this possible, or am I doing something wrong?
var fill = textures.paths().d(function(s){
// This path is generated by another function that does the sizing
var path = 'M24,3.5999999999999996 L23.1,5.3999999999999995 L23.700000000000003,6.8999999999999995 L25.5,7.5 L27,6.300000000000001 L27,4.199999999999999 z';
return path
})
.size(30)
.strokeWidth(0.5)
.fill('#fff')
.background('#000');
Please provide example code snippets for integrating Textures.js with popular chart frameworks, so that developers can add textures more quickly to our applications!
@zanarmstrong created a tool for drawing textures:
http://bl.ocks.org/zanarmstrong/raw/08833a326224d41fbb96/
Creating patterns is usually tricky, it would be great to have such tool in a dedicated webpage and linking to it from the textures.js webpage (or having it directly there).
@zanarmstrong's tool can be improved with some features, like
Hello,
I would like to be able to export the textures to a svg file with a tool such as svg crowbar; unfortunately it only seems to work in Inkscape β Illustrator or Affinity Designer don't find the textures. If I use Inkscape to export to PDF, then open the PDF in Illustrator, the textures are there but contain a small βborderβ around each square, which is pretty ugly.
Do you have any idea of what can be missing? I can post example files.
Maybe this is more an issue with your personal site...but you have a beautiful and compelling intro page for this repository, only to have no link to the code! It took searching your name on Github to find the actual repo, so I could star it for later.
Please add a link to the specimen page. This is wonderful work!
Can you push out releases so the version can handled through bower?
Is it possible to use a gradient fill instead of a single colour?
var def = svg.append('defs');
var gradient = def.append('linearGradient')
.attr('id', 'custom_id_1')
.attr('x1', '50%')
.attr('y1', '0%')
.attr('x2', '50%')
.attr('y2', '100%');
//set start
gradient.append('stop')
.attr('offset', '0%')
.attr('stop-color', 'white')
//set color at the end
gradient.append('stop')
.attr('offset', '100%')
.attr('stop-color', 'blue')
var t = textures
.lines()
.shapeRendering("crispEdges")
.background('url(#custom_id_1)');
var t = textures
.lines()
.shapeRendering("crispEdges")
.stroke('url(#custom_id_1)');
When I want to print with a browser. I found that the effect is not what I thought.
Would be great to see this library on www.npmjs.com.
Personally, I could see myself using this in a future version of D3plus.
This issue is related to #7, in particular at the @bollwyvl comment
an element in an svg can always know its svg. Since these textures must be
singletons anyway a la #id, and since it can only ever drive "fill"... one
could remove the svg.call(t1) and t1.url(). Then it would just be
shape.call(t1), which would be much more d3-like. Under the hood, it would
selectAll("defs #some-texture-id", [t]) and then the whole enter/update
dance... But finally selection.style("fill", t.url()).
At the moment a new texture cannot be created from another one.
The following direction has been suggest on issue #7.
var svg = d3.select("#example").append("svg");
var t1 = textures.lines().thicker();
var t2 = t1.copy().fill("red") // This creates a new texture instance
// t1 and t2 would have separate defs in the SVG
svg.call(t1);
svg.call(t2);
svg.append("circle").style("fill", t1.url());
svg.append("circle").style("fill", t2.url());
I really only need the patch that makes require
work. Thanks.
Is there any solution for change stroke-width and size using d3 zoom scale?
Here's the shortest way I saw at present to represent a scale of textures:
http://codepen.io/anon/pen/wBRwvj
Perhaps a textures.scale
, necessarily ordinal, could make this easier:
scale = textures.scale.lines()
.domain(data)
.strokeWidth(function(d){ return d.value; });
svg.call(scale.init()) // compute all the textures needed, insert the defs
svg.selectAll("circle")
.data(data)
.enter()
.style({fill: scale})
d3 version 2.9.7
Usage:
var t = textures.lines().thicker();
svg.call(t);
svg.style('fill', t.url());
svg.call(t)
returns undefined inside d3's append child method.
Hello everybody, today I have a super simple example that I want to display. After looking at this for several hours and searching through internet (since no docs are available today) I'm getting stuck with this:
<html>
<script src="https://unpkg.com/[email protected]/dist/textures.js"></script>
<body>
<svg xmlns='http://www.w3.org/2000/svg' style="border: 1px solid red;">
<defs>
<pattern
id="slzxo"
patternUnits="userSpaceOnUse"
width="10"
height="10"
>
<path
d="M 2.5,7.5l2.5,-5l2.5,5"
fill="transparent"
stroke="darkorange"
stroke-width="1"
stroke-linecap="square"
shape-rendering="auto"
></path>
</pattern>
</defs>
<circle style='fill: url("#slzxo");'></circle>
</svg>
</body>
</html>
Can someone help me with this basic example output that was given by my React app and that does not display anything?
I also have this in React:
import textures from "textures";
import * as d3 from "d3";
import React from "react";
import ReactDOM from "react-dom";
class MySvgBackground extends React.Component {
componentDidMount() {
const svg = d3.select("#example").append("svg");
const texture = textures
.paths()
.d("caps")
.lighter()
.thicker()
.stroke("darkorange");
svg.call(texture);
svg.append("circle").style("fill", texture.url());
}
render() {
return (
<div id="example" style={{border: "1px solid red"}}></div>
);
}
}
ReactDOM.render(
<React.StrictMode>
<MySvgBackground />
</React.StrictMode>,
document.getElementById("root")
);
I also want to bring a little precision about this code. If I define elsewhere the svg than in componentDidMount(), than it won't add in the <div id="example"... the svg tag.
Thank you! :)
I am using a pattern to fill a map usin the .attrr('fill','url(..')
but when I download it as an svg the url fill are all white
does anyone have a solution to downloading the actual patterns?
sorry I know this is not really a specific issue to this library but I have not found any help with this anywhere else.
I've installed textures using npm install textures --save-dev
but when I try and require('textures');
it is returning as undefined.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.